CSS position定位

蔚落 2023-07-21 05:58 51阅读 0赞

# 文档流 #

文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。并最终窗体自上而下分成一行行，并在每行中按从左到右的顺序排放元素。让元素脱离文档流的方法有：浮动和定位（绝对定位/固定定位会脱离文档流）。

# 默认定位 static #

static 是 position 属性的默认值。即没有定位，元素在正常的流中，top，right，bottom，left 和 z‐index 属性无效。

如果省略 position 属性，浏览器就认为该元素是 static 定位。这时，浏览器会按照源码的顺序，决定每个元素的位置，这称为"正常的页面流"（normal flow）。每个块级元素占据自己的区块（block），元素与元素之间不产生重叠，这个位置就是元素的默认位置。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmdqaWFuYm8xOTky_size_16_color_FFFFFF_t_70][]![20200402185252351.png][]

# 相对定位 relative #

relative表示，相对于默认位置（即static时的位置）进行偏移，即定位基点是元素原本默认的位置。它必须搭配top、bottom、left、right这四个属性一起使用，用来指定偏移的方向和距离。元素偏移之后，他本来在默认文档流中占据的位置仍然存在。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmdqaWFuYm8xOTky_size_16_color_FFFFFF_t_70 1][] ![20200402185637273.png][]

# 绝对定位 absolute #

absolute表示，相对于最近的已定位的父元素进行定位，如果没有，则相对于 html 元素。

它有一个重要的限制条件：定位基点（一般是父元素）不能是 static 定位，否则定位基点就会变成整个网页的根元素 html 。另外，absolute 定位也必须搭配 top、bottom、left、right 这四个属性一起使用。绝对定位会让元素脱离标准文档流，该元素原本所占空间现在为零。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmdqaWFuYm8xOTky_size_16_color_FFFFFF_t_70 2][]![2020040218590950.png][]

# 固定定位 fixed #

fixed表示，相对于视口（viewport，浏览器窗口）进行偏移，即定位基点是浏览器窗口。这会导致元素的位置不随页面滚动而变化，好像固定在网页上一样。如网站顶端的固定导航、两侧固定的广告等。

它如果搭配top、bottom、left、right这四个属性一起使用，表示元素的初始位置是基于视口计算的，否则初始位置就是元素的默认位置。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmdqaWFuYm8xOTky_size_16_color_FFFFFF_t_70 3][]![20200402190311127.png][]

（上图界面已经滚动一部分，但是 B 元素的位置未变）

# 磁贴定位 sticky #

sticky：relative+fixed 的结合，元素在跨越特定阈值前为相对定位( relative )，之后为固定定位( fixed )。这是新增的定位方式，专门用于页面滚动的时候的定位，可以方便实现吸顶条的效果。

sticky 生效的前提是，必须搭配 top、bottom、left、right 这四个属性一起使用，不能省略，否则等同于 relative 定位，不产生"动态固定"的效果。原因是这四个属性用来定义"偏移距离"，浏览器把它当作sticky的生效门槛。

它的具体规则是，当页面滚动，父元素开始脱离视口时（即部分不可见），只要与 sticky 元素的距离达到生效门槛，relative 定位自动切换为 fixed 定位；等到父元素完全脱离视口时（即完全不可见），fixed 定位自动切换回 relative 定位。

请看下面的示例代码。（注意，除了已被淘汰的 IE 以外，其他浏览器目前都支持 sticky。但是，Safari 浏览器需要加上浏览器前缀-webkit-。）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmdqaWFuYm8xOTky_size_16_color_FFFFFF_t_70 4][]![20200402190709576.png][]![20200402190728260.png][]

（上图中，滚动到 B 元素设置的 top:10px 时，由相对定位变为固定定位，滚动到父元素底部不够 B 元素高度时，又变为相对定位）

# 其他 #

**position:relative 和负 margin 都可以使元素位置发生偏移，二者有什么区别？**

*  相对定位后元素位置发生偏移，它仍会坚守原来占据的空间，不会让文档流的其他元素流入。
 *  负margin会使元素在文档流中的位置发生偏移，它会放弃偏移之前占据的空间，紧挨其后的元素会填充这部分空间。

**文档流、定位和父子元素高度之间的关系?**

*  对于正常 static 定位，如果不对父元素设置高度，那么父元素的高度应该是所有自元素的高度之和。
 *  如果使用相对定位，那么元素不会脱离文档流，父元素的高度还是其所有元素高度之和，但是相对定位的元素，可能超过父元素的范围。
 *  如果使用绝对定位，那么元素会脱离文档流，父元素在计算高度的时候，会好像绝对定位的子元素不存在一样。
 *  对于固定定位的情况，结果和绝对定位一致。

# 参考 #

参考教程：[http://www.ruanyifeng.com/blog/2019/11/css-position.html][http_www.ruanyifeng.com_blog_2019_11_css-position.html]

参考博客：[https://blog.csdn.net/just\_wq/article/details/90932521][https_blog.csdn.net_just_wq_article_details_90932521]

参考博客：[https://blog.csdn.net/jianghao233/article/details/80534835][https_blog.csdn.net_jianghao233_article_details_80534835]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmdqaWFuYm8xOTky_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200402185239537.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmdqaWFuYm8xOTky,size_16,color_FFFFFF,t_70
[20200402185252351.png]: /images/20230528/996a4f82b7c84090a5b710362afc0c01.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmdqaWFuYm8xOTky_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200402185611369.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmdqaWFuYm8xOTky,size_16,color_FFFFFF,t_70
[20200402185637273.png]: /images/20230528/9b4af630a42d40819deedbd2481658ed.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmdqaWFuYm8xOTky_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200402185943991.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmdqaWFuYm8xOTky,size_16,color_FFFFFF,t_70
[2020040218590950.png]: /images/20230528/9f5f3745a74e46d3aabbc4c1c8bc0d5d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmdqaWFuYm8xOTky_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200402190258608.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmdqaWFuYm8xOTky,size_16,color_FFFFFF,t_70
[20200402190311127.png]: /images/20230528/298c002c3d9041fdb333d98f09de5575.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmdqaWFuYm8xOTky_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200402190744853.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmdqaWFuYm8xOTky,size_16,color_FFFFFF,t_70
[20200402190709576.png]: https://img-blog.csdnimg.cn/20200402190709576.png
[20200402190728260.png]: /images/20230528/c028026a3f96469a9b9f900cbd1e27e9.png
[http_www.ruanyifeng.com_blog_2019_11_css-position.html]: http://www.ruanyifeng.com/blog/2019/11/css-position.html
[https_blog.csdn.net_just_wq_article_details_90932521]: https://blog.csdn.net/just_wq/article/details/90932521
[https_blog.csdn.net_jianghao233_article_details_80534835]: https://blog.csdn.net/jianghao233/article/details/80534835