精确获取元素样式值 - 位置
写这篇文章我很矛盾,因为如果非常规范的写代码,这篇文章说的问题根本就不存在。因为 top right / bottom left 一般都会手动设置,如果不小心结果是 auto,那绝对是您忘了赋值了。
比如为了绝对定位到父级元素(offsetParent)的左上角,有时候我们会偷懒写成下面这样:
position : absolute ; |
我们以为浏览器默认会填上 left: 0; top: 0; 没错,大部分浏览器都会实现同样的效果,但是却不是 0px,而是 auto,这时候问题就来了,而且我曾经在Firefox x.0 中发现,这样简写居然不是定位到左上角,当然最新的版本已经解决了这个问题。
首先说明一下,本文所写全部针对绝对定位,因为 static relative fixed 没有动态取值的必要,当然如果非要考虑周全,就是下面这样:
static: auto -> 0px
relative: auto -> 0px
fixed: auto -> 元素相对于浏览器窗口的位置
我真心觉得没必要考虑这三位,所以我的处理方式是,非 'absolute' 碰到 auto 统一转为 0px
下面给几个绝对定位(top / right / bottom / left 全是 auto)的例子:
1. 默认
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | #a { background : red ; border : 10px solid blue ; width : 500px ; height : 500px ; position : relative ; } #b { background : green ; width : 100px ; height : 100px ; position : absolute ; } |
这时 left 和 top 等同于 0px
2. 父元素设置padding
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | #a { background : red ; border : 10px solid blue ; width : 500px ; height : 500px ; padding : 50px ; position : relative ; } #b { background : green ; width : 100px ; height : 100px ; position : absolute ; } |
这时 left 和 top 等同于 父元素的 padding-left 和 padding-top
3. 父元素没设置 padding,子元素设置 margin
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | #a { background : red ; border : 10px solid blue ; width : 500px ; height : 500px ; position : relative ; } #b { background : green ; width : 100px ; height : 100px ; position : absolute ; margin : 50px ; } |
这时 left 和 top 等同于 元素的 margin-left 和 margin-top
4. 最后给一个特殊例子,元素设置 left: 0; top: 0; 并且 设置margin,而父元素设置 padding
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | #a { background : red ; border : 10px solid blue ; width : 500px ; height : 500px ; position : relative ; padding : 50px ; } #b { background : green ; border : 10px solid yellow; width : 100px ; height : 100px ; margin : 50px ; position : absolute ; left : 0 ; top : 0 ; } |
这时,即使设置了 left 和 top,还是被自己的 margin 影响了
综上,我们不用考虑目标元素的盒模型,只管父元素(offsetParent)的 padding,所以的当位置为 auto 时,转换公式如下:
位置(left) = 父元素padding(left);
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步