文章目录
- 元素定位(position)
- 1、相对定位
- 2、绝对定位
- 总结
元素定位(position)
定位是一种更为高级的布局方法。通过定位可以使得元素摆放在页面中任意位置。
position属性有五个值:
• static ------ 默认值
• relative---- 相对定位
• absolute --绝对定位
• fixed -------固定定位
• sticky ------粘滞定位
偏移量(offset),有四个属性:top、bottom、left、right。
top值越大,定位元素向下移动的越多;bottom越大,定位元素向上移动的越多。left = - bottom
left值越大,定位元素向右移动的越多;right越大,定位元素向左移动的越多。left = - right
1、相对定位
当元素的position属性值设置为relative时开启相对定位。
特点:
- 不设置偏移量(offset)时,元素不会发生变化。
- 相对定位是相对于元素原本的位置进行定位。
- 相对定位会提升元素的层级。
- 相对定位不会使元素脱离文档流,不会改变元素性质(行内元素、块元素)。
相对定位
粘滞定位
当元素的position属性值设置为sticky时开启粘滞定位。粘滞定位是一种相对定位,不同的是可以使元素在某个位置固定不动。
2、绝对定位
当元素的position属性值设置为absolute时开启绝对定位。
特点:
- 开启绝对定位时,如果不设置偏移量,元素的位置不会改变。
- 元素会从文档流中脱离。
- 会改变元素性质—行内元素变为块,块的内容会被内容撑开。
- 绝对定位会使元素提升一个层级。
- 绝对定位元素是相对于其包含块进行定位。
包含块:
- 正常情况下,包含块是离当前元素最近的祖先块元素。
- 绝对定位情况下,离它最近的开启定位的祖先块元素(html为根元素、初始包含块)。
固定定位
当元素的position属性值设置为fixed时开启固定定位。固定定位是一种绝对定位,不同的是永远参照浏览器视口进行定位。固定定位的元素不会随滚动条移动。
总结
一般工作当中,使用较多的是相对定位和绝对定位,另外两种兼容性有局限