CSS定位 static、relative、absolute、fixed、sticky

一、CSS定位

css定位分为五种：static、relative、absolute、fixed、sticky。

二、static

• static是position的默认值。如果省略position属性，浏览器默认该元素是static定位；
• static定位浏览器会按照源码的顺序，决定每个元素的位置，这称为“正常的页面流”。每个块级元素占据自己的区块，元素之间不重叠，这个位置就是元素的默认位置；
• top、bottom、left、right、z-index五个属性无效。

三、relative（相对定位）

• 不脱离文档流的布局，只改变自身的位置，在文档流原先的位置遗留空白区域；
• 定位的起始位置为元素原先在文档流的位置；
• 可以通过top、bottom、left、right四个属性改变自己的位置。

四、absolute（绝对定位）

• 脱离文档流布局，遗留下来的空间有后面的元素填充；
• 定位的起始位置为最近的父元素（position不为static的元素），如果所有的祖先元素定位都是static，则起始位置body；
• 可以通过top、bottom、left、right四个属性改变自己的位置；
• 不设置top、bottom、left、right则起始位置走正常文档流。

五、fixed（固定定位）

• 脱离文档流布局，遗留下来的空间有后面的元素填充；
• 定位的起始位置为浏览器窗口；
• 固定在网页上，不随页面滚动而滚动；
• 可以通过top、bottom、left、right四个属性改变自己的位置；
• 不设置top、bottom、left、right则起始位置走正常文档流。

六、sticky（粘性定位）

• relative和fixed的结合
• 不设置top、bottom、left、right时和relative效果一致；
• 当页面滚动，父元素开始脱离浏览器视口时（部分不可见），就跟fixed一样，其他情况下和relative一样。