CSS 中的位置

涉及 CSS 中尺寸 (opens new window)

避免不了要提到 CSS 中位置，尺寸指宽高

位置是 left、top 等位置坐标信息

元素布局重要的无非是尺寸与位置

所有的位移动画与位置坐标息息相关

只列举 top 相关的位置信息， left 相关位置信息与之类似

# 元素的位置类型、属性与计算

# 元素的位置类型

1. 相对于自身的位置信息，比如 top
2. 与位置的类型，比如 clientTop
3. 相对于父元素的位置信息，比如 offsetTop
4. 相对于子元素的边缘的信息，比如 scrollTop
5. 相对于视口的位置信息，比如 ele.getBoundingRect().top

# 元素的位置属性与计算

1. ele.top: 元素相对于有定位的父元素上边缘的距离，static 定位时值无效，使用默认值 auto，其他定位结果是带单位字符串，比如 100px
2. ele.clientTop：元素上边框的高度，即元素的 borderTopWidth，注意前者获取数字类型，后者获取带单位字符类型
3. ele.offsetTop: 元素有定位父元素或者父元素是 table, td, th, body 元素的 padding 上边缘的距离
4. ele.scrollTop: 元素滚动后的上边距，即元素与其子元素的上边缘的距离，如果元素有伪元素，则子元素高度 + 伪元素高度 - 元素内容高度 = scrollTop
5. ele.getBoundingRect().top: 相对于视口的距离

# 元素 ::before、::after 伪元素对其位置计算影响

::before、::after 伪元素 除了影响 scrollTop 外

不影响其他位置信息的计算结果

因为伪元素相当于是元素的子元素

而元素的位置信息须有一个参照物，自身、父级元素、视口

而与子元素没有任何关系

# border-box 盒模型下的位置计算

border-box 怪异盒下，只影响元素的 content 内容尺寸

会压缩内容尺寸，也就是宽、高

scrollTop 与元素的高度息息相关的

所以除了影响 scrollTop 计算，结果变大，其他位置计算结果不变

# 小结

在自定义滚动条或长列表使用虚拟列表优化时用到元素的位置信息

元素位移动画也会用到

其中值得注意的是：

1. clientLeft/clientTop 指元素左边框宽度/上边框的高度
2. getBoundingRect().top 获取的是元素与视口的位置信息
3. ::before、::after 伪元素及 border-box 盒模型下只影响 scrollTop 或 scrollLeft 值