CSS的position属性完全解析
什么是position属性?
position
是CSS中用来设置元素定位方式的属性,它有五种取值分别是:
- static
- relative
- absolute
- fixed
- sticky
static
static
是position
属性的默认值,元素不受top, right, bottom, left or z-index影响,即便设置了它们也不会生效。
relative
relative
相对于元素自身正常位置进行定位。被定位的元素仍然根据文档流进行排列,其它元素仍然会占据原有的位置不受影响。当你设置top, right, bottom, left或z-index的时候,被定位的元素的位置会发生变化。
示例代码:
div.relative {
position: relative;
left: 30px;
top: 50px;
}
absolute
absolute
相对于最近的已定位祖先元素进行定位,如果没有已定位的祖先元素,则相对于文档的body元素。被定位元素从文化流中脱离,不再占据原来的位置,所以其它元素位置会被改变。
示例代码:
div.parent {
position: relative;
}
div.child {
position: absolute;
top: 30px;
right: 50px;
}
fixed
fixed
相当于一种特殊的绝对定位,而且是相对于浏览器窗口来计算位置。元素无论如何滚动,都会常驻在屏幕上的指定位置。和absolute
一样,元素也从文化流中脱离,不影响其它元素。
示例代码:
div.fixed {
position: fixed;
bottom: 10px;
right: 10px;
}
sticky
sticky
是一个新属性,还未广泛使用。它做的事情类似于fixed
,sticky
是相对于其它元素进行定位,但是具体的定位方式又和relative
非常相似。在满足特定条件时,元素会固定在一个位置,但是随后又会继续按照正常的relative方式进行定位。
示例代码:
div.sticky {
position: sticky;
top: 0;
}
总结
以上是position
属性的五种值的说明,它是CSS中用来定位元素位置的属性,切记在设置元素定位时不要滥用position
属性,否则会将文档流打乱带来不良的排版效果。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:CSS的position属性完全解析 - Python技术站