前端新人学习路径（4/26）

编辑：011 时间：2022-01-10

前言

上一节我们说了浮动布局，如果大家完全掌握了浮动布局，那么每一个div元素的位置将变得非常容易把控，但是又出现了一个新的问题，我们经常看到网页中元素会重叠，让某一个元素压到另一个元素的上面，想实现这样的效果，就需要我们今天的内容：定位。

今天我们主要考虑下面四个问题：

通过position属性可以将元素设置成一个定位元素，我们可以通过left,top,z-index来设置定位元素的x,y,z坐标（当然是用right和bottom也可以设置定位元素的坐标）。

绝对定位

selector{ position:absolute; }

相对定位

selector{ position:relative; }

固定定位

selector{ position:fixed; }

设置参照物

将绝对定位元素的上级（父级或祖先级）设置position:relative，则绝对定位元素的原点坐标以其上级的左上角为准。

掌握了今天定位的方法，我们就可以将html元素放在我们希望的任何位置上了。但是新手总是会有一个问题，既然定位可以让元素放在任何位置，那为什么要用浮动布局呢，直接将元素都定在指定位置就好了？

这样做确实可以将网页拼接出来，但是会引入两个非常严重的问题：

第一，如果容器要适应内容的高度，例如网页中文章的内容不确定，文章的容器高度就不能写固定值，这样文章下面的内容就无法确定定位的坐标。
第二，如果元素都是定位在指定位置，如果页面修改，例如删除中间的某一个内容，那么下面所有的元素都要重新设置坐标，但是如果是浮动布局，下面的内容会直接排列上去，不会有太多影响。

所以，在网页布局的过程中，如果可以不用定位来实现的布局，就不要用定位。

如果您在练习的过程中经常出现问题，可以关注微信公众号：晓舟报告，获取案例源码（有注释）和学习素材，以便于您更高效地学习，本节的案例如下所示：

如果您觉得有收获，请不要吝惜一个小小的【赞】，如果喜欢类似的文章，可以关注微信公众号：晓舟报告，第一时间获取文章。

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

回复列表