admin管理员组文章数量:1611924
先来介绍一下position的定位方式
1.两个div都没定位
<div style="width: 300px;height: 300px;background-color: yellow;">
第一层
</div>
<div style="width: 300px;height: 300px; background-color: blue;">
第二层
</div>
效果如下:
2.将第一个div使用absolute定位
在第一个div中加入如下代码
position:absolute;
top:100px;
效果如下:
可以看出第一层生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。覆盖了第二层的div,脱离出了文档流。
(脱离文档流即是指:元素排版布局过程中,元素会自动从左往右,从上往下的流式排列。并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素。脱离文档流即是元素打乱了这个排列,或是从排版中拿走。)
3.将第一个盒子使用relative
在第一个div中加入如下代码:
position:relative;
top:100px;
效果如下:
relative是生成相对定位的元素,相对于其正常位置进行定位
可以看出,第一个div原本的空间还是在的,它只是相对于自己原本的位置进行下移,并没有脱离文档流。但是它也是会覆盖后边的块。
4.fixed属性定位
fixed生成固定定位的元素,是相对于浏览器窗口进行定位。
<p>hello world!</p>
<div style="width: 300px;height: 300px;background-color: yellow; position:fixed; top:10px;">
第一层</div>
<div style="width: 300px;height: 300px; background-color: blue;">
第二层</div>
效果如下:
其效果图与上边absolute一样(是absolute上层父级元素没有position:relative|absolute的情况下才一样)
测试的时候在第一层的上边加入一段文本,将第一个div下移10px,发现会遮挡文字。
说明fixed脱离文档流,会造成覆盖。
其他几个属性我就不一一细说了。
参考:DOM中关于脱离文档流的几种分析
解决方案:
1.z-index属性
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
在上层div代码中加入z-index:-1;
效果如下:
相当于将第一层置为底层。
2.使用文档流的特性(不会覆盖)
代码如下:
<div style="position:relative;">
<div style="width: 300px;height: 300px;background-color: yellow;">
第一层</div>
<div style="width: 300px;height: 300px; background-color: blue; position: absolute;">
第二层</div>
</div>
基本思想是,在最外层加一个div块,设置为相对定位(在文档流中)
再将第二个div设置为绝对定位(这时它的父元素变为了最外层div,再进行绝对定位)
效果如下:
需要注意的是,此时第二个div是脱离了文档流了的。
3.下层设置margin-top
虽然第一个div移动了,但它实际在文档流中的位置没有改变,只需要相对于上层div原来的位置设置自己的外边距,就可以实现消除重叠。
测试代码如下:
<div style="width: 300px;height: 300px;background-color: yellow;position: relative;top:30px;">
第一层</div>
<div style="width: 300px;height: 300px; background-color: blue; margin-top: 30px; ">
第二层</div>
4.普通流
根据块级元素和行内元素,设定两张图次序。
总结:
这是昨天在练习css时遇到的问题,自己动手实验便于加深理解。利用postion可以实现布局,重叠,透明化等设计,但在具体使用时一定要分清在不在文档流中。
(其他方法,欢迎各位博友进行补充。可能有些概念没说清楚,欢迎指点)
版权声明:本文标题:CSS关于position布局覆盖及解决方案 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/xitong/1728604860a1165322.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论