CSS的定位属性position

position的值有四种：

• static（默认，就是没有设置定位）
• relative（相对）
• absolute（绝对）
• fixed（固定）
• sticky（粘性）

static   属于普通流。

relative 会保留自己原本的位置，并根据原本的位置进行定位，属于普通流。

absolute 不会保留自己原本的位置，脱离正常文档流，根据最近的定位上下文进行定位。

fixed    不会保留自己原本的位置，脱离正常文档流，遵循屏幕视图进行定位。

sticky   保留自己原本的位置，在滚动时根据离它最近的滚动祖先（有两个情况：1.祖先元素设置了overflow属性 2.祖先元素的内容部分有超出了）进行定位。

在Y轴上类似相对定位+绝对定位的结合，使用top设置元素坐标时只在文档上的元素超出容器的可视区域生效，margin只会在文档上的元素处于可视区域时候生效，同时也不会和top等数值叠加，bottom设置则无效。在X轴上,使用lefth和margin情况取较大值，在可视区域与不可视区域的效果相同，right设置无效。

 

设置了定位的元素可以通过top，bottom，left，right（可以和外边距设置的数值可以叠加）和z-index属性。

 

四种文档布局流：

  1. 普通文档流，如设置static和relative

  2. 脱离文档流，如设置relative和absolute

    1. 针对视口定位，如设置fixed

    2. 针对有定位的祖先元素定位，如设置absolute

  3. 浮动流，设置float不为none

  4. sticky流，设置了sticky

 

定位上下文：显式设置了position的值，且不为static。