position

什么元素可以设置position 答: 常见的元素都可以设置position,除position:relative 对display为table-开头的元素无效。

position取值:

static

此时设置top, right, bottom, left 和 z-index 属性无效。

保留元素在标准流的位置,相当于标准流的位置进行定位

元素会被移出正常文档流，

直接设置position: absolute;,而不设置top, right, bottom, left,则会贴在标准流后面

设置top, right, bottom, left后恢复正常,相当于最近的非 static 定位祖先元素进行偏移

元素设置的width,height,margin与padding的值,都相对于最近的非 static 定位祖先元素,而不再是父元素

元素会被移出正常文档流

元素变成块级元素,可以设置width与height
相对于屏幕视口 的位置来指定元素位置,不受滚动条影响
当元素祖先的 transform, perspective 或 filter 属性非 none 时，容器由视口改为该祖先。直接设置position: fixed;,而不设置top, right, bottom, left,则会贴在标准流后面

元素设置的width,height,margin与padding的值,默认都相对于屏幕视口

保留元素在标准流的位置,相当于标准流的位置进行定位

相对它的最近滚动祖先与最近块级祖先基于top, right, bottom, 和 left的值进行偏移。偏移值不会影响任何其他元素的位置。
sticky元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上,(当该祖先的overflow是hidden,scroll,auto或overlay时)