一、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一样。