这篇文章主要介绍CSS中如何定位布的局,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
<强> 1。什么是定位:
CSS中属的地位性,位置有四个值:绝对/相对固定/静态(绝对/相对/固定/静态(默认))通过定位属性可以设置一些不规则的布局,使用<强> TLBR(前、左、底部右)来调整元素位置。
<强> 2。各个属性值的描述:
静态(静态),没有特别的设定,遵循基本的定位规定,不能通过z - index进行层次分级,在普通流中,各个元素默认的属性.relative(相对定位),对象不可层叠,不脱离文档流,参考自身静态位置通过,下,左,右定位.absolute(绝对定位),脱离文档流,通过,下,左,右定位。选取其最近一个最有定位设置的父级对象进行绝对定位,如果对象的父级没有设置定位属性,绝对元素将以身体坐标原点进行定位.fixed(固定定位),这里所固定的参照对像是可视窗口而并非是身体或是父级元素。使用了固定的元素不会随着窗口的滚动而滚动。属于绝对的子集。
<强> 3。各个属性值的具体作用:
<强> A.static: (静态,默认的属性)通常情况下都不会使用,但是会存在有些场景,就是你想把位置的值从其他值修改成默认时使用。
<强> B.relative: (相对定位)一个元素设定了位置:相对的,因为其不脱离文本流,如果不设置TLBR(前、左、底部右)的话,它的位置不会被改变,且不会影响当前布的局,相当于没事发生一样。如果设置了TLBR后,元素就可以向指定的方向偏移,但是他原有的位置还是占据着的,例子如图:
图一:对child-1设置了位置:相对
图二:再对child-1调位置:20 px左:20 px
<强> C。绝对:(绝对定位),完全脱离文本流(普通流),原来的位置不再占有,且可以设置TLBR任意移动;
特别说明一下,对元素设置了绝对后,其父级元素都没有设置位置:绝对/相对固定其会以身体为父级。
图一:
图二:
图三:
<强> D.fixed :(固定定位),不会随着页面滚动而滚动,这里就不贴图了,最形象的就是那些网页小广告,你滚动页面,但是它一直在网页的右边或左边,死跟着你。
<强> 4。定位布局技巧:位置:相对与位置:绝对结合使用:
上面提到如果对元素设置了绝对后,其父级元素都没有设置位置:相对的,其会以身体为父级。这样的话我们该元素定位到我们的目标位置将很困难,量像素麻烦。图片说明:
图一:初始状态
图二:对box-chd-chd设置位置:绝对并设置:0,左:0可以看到它从身体作为父级,会以最左上角作为起点
图三:对框设置位置:亲戚,可以看到此时box-chd-chd作以盒子为父级
图四:再对box-chd设置位置:亲戚,可以看到box-chd-chd以box-chd作为父级
可以看的出,当子代设置了位置:绝对后,其父级那个设置了位置:亲戚,这个子代就会从该父级元素最左上方作为起点移动,并且遵循<强>就近原则强,即子代向上找父级,当找到第一个有父级设置了相对就以它最左上方作为起点。
相对与绝对结合的方式,对定位布局起到了便利,需要移动的距离也得到缩小,不用从身体开始整个页面来量取像素,同时也方便管理,结构清晰。
以上是“CSS中如何定位布局”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注行业资讯频道!
