前端定位问题

搬不完的元猿员

已关注

2.224

字数 583 · 阅读 3755

2019-03-31 05:00

定位

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

绝对定位

将元素设置为定位元素

原点坐标以浏览器窗口左上角为准

脱离文档流（不占位），后面的元素会填充它的位置。

相对定位

将元素设置为定位元素

原点坐标以该元素原位置为准

不脱离文档流（占位），后面的元素不会填充它的位置。

固定定位

将元素设置为定位元素

原点坐标以当前浏览器窗口位置的左上角为准

不管滚轮如何滚动，定位位置不变

设置参照物

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

总结

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

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

第一，如果容器要适应内容的高度，例如网页中文章的内容不确定，文章的容器高度就不能写固定值，这样文章下面的内容就无法确定定位的坐标。

第二，如果元素都是定位在指定位置，如果页面修改，例如删除中间的某一个内容，那么下面所有的元素都要重新设置坐标，但是如果是浮动布局，下面的内容会直接排列上去，不会有太多影响。

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

更多前端内容请点击关注

139

感谢您的认可，小编会继续努力输出优质内容

赞赏支持

等16人