来自css的position属性


position 属性规定了元素布局的定位机制。任何元素都可以被定位。其中,绝对和固定元素会生成一个块级框,无论该元素本身是什么类型;相对定位元素会根据其在文档流中的原位置偏移。

static

position属性的默认值,没有定位,处于正常的文档流中,不受top, left, bottom, right 和 z-index的影响。

relative

相对定位,不脱离文档流,相对于其本身在文档流中的正常位置偏移定位,比如top:20px: 会在元素的顶部增加20个像素。

position:relative 未定义对 table-*-group, table-row, table-column, table-cell, table-caption 元素应用的效果。

absolute

绝对定位,脱离正常文档流,相对于static以外的第一个元素进行定位。位置通过top, left, bottom, right进行规定。绝对定位元素可设置外边距(margins),也不与其他外边距合并。

fixed

固定定位,脱离文档流,相对于viewport进行定位。屏幕滚动时,元素位置不改变。

当祖先元素的transform为非none值时,fixed元素容器由viewport变为该祖先元素。

sticky

设置了sticky的元素,在viewport范围内时,该元素的位置不受到定位影响(top,left等无效),当该元素的位置将要移除偏移范围时,定位会变成fixed,根据设置的left、top等属性进行定位。

该元素不脱离文档流,仍保留元素在原文档流中的位置。

当元素在容器中被滚动超过指定的偏移值时,元素在容器内固定在指定位置

元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素,如果祖先元素都不可以滚动,那么是相对于viewport来计算元素的偏移量。
使用的浏览器FireFox和iOS的Safari可查看效果

position--sticky-

分类于 CSS  

发表评论