前端定位问题
搬不完的元猿员
已关注
2.224
·
字数 583 · 阅读 3755
2019-03-31 05:00
定位
通过position属性可以将元素设置成一个定位元素，我们可以通过left,top,z-index来设置定位元素的x,y,z坐标（当然是用right和bottom也可以设置定位元素的坐标）。
绝对定位
将元素设置为定位元素
原点坐标以浏览器窗口左上角为准
脱离文档流（不占位），后面的元素会填充它的位置。
相对定位
将元素设置为定位元素
原点坐标以该元素原位置为准
不脱离文档流（占位），后面的元素不会填充它的位置。
固定定位
将元素设置为定位元素
原点坐标以当前浏览器窗口位置的左上角为准
不管滚轮如何滚动，定位位置不变
设置参照物
将绝对定位元素的上级（父级或祖先级）设置position:relative，则绝对定位元素的原点坐标以其上级的左上角为准。
总结
掌握了定位的方法，我们就可以将html元素放在我们希望的任何位置上了。但是新手总是会有一个问题，既然定位可以让元素放在任何位置，那为什么要用浮动布局呢，直接将元素都定在指定位置就好了？
这样做确实可以将网页拼接出来，但是会引入两个非常严重的问题：
第一，如果容器要适应内容的高度，例如网页中文章的内容不确定，文章的容器高度就不能写固定值，这样文章下面的内容就无法确定定位的坐标。
第二，如果元素都是定位在指定位置，如果页面修改，例如删除中间的某一个内容，那么下面所有的元素都要重新设置坐标，但是如果是浮动布局，下面的内容会直接排列上去，不会有太多影响。
所以，在网页布局的过程中，如果可以不用定位来实现的布局，就不要用定位。
更多前端内容 请 点击关注
139
感谢您的认可，小编会继续努力输出优质内容
赞赏支持
等16人
相关推荐
为什么阿里巴巴禁止把SimpleDateFormat定义为static类型的？
阅读 1851
天然缅甸翡翠并没有那么贵，这里只要成本价
广告
写作干货：每一个人都可以靠写作逆袭人生
阅读 3031
大金毛叼着牌子帮主人逃避“交警罚单”，大眼睛满是认真，萌翻了
阅读 3369
写作的最高境界
阅读 11521
