一般的场景是一个遮罩加一个弹框
效果是这样的
这个时候在内部的 children 再使用 fixed 布局时,就会被父级的 fixed 元素限制住
1、父级不使用 tansform
2、不进行嵌套
一、float实现
html结构:
[html] view plain copy
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
css:
[css] view plain copy
.left,.right{
width: 200px
height: 300px
background-color: red
}
.left{
float: left
}
.right{
float: right
}
.center{
margin: 0 210px
height: 300px
background-color: blue
}
这种实现受外界影响小,但是对html结构有要求(center必须放在最后,left与right则无所谓),当界面缩小到一定程度时,right会被挤到下一行
二、position实现
html结构:
[html] view plain copy
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
css:
[css] view plain copy
.left,.right{
position: absolute
width: 200px
height: 300px
background-color: yellow
}
.left{
left: 0
}
.right{
right: 0
}
.center{
margin: 0 210px
height: 300px
background-color: blue
}
该法布局的好处,三个div顺序可以任意改变。不足是 因为绝对定位,所以如果页面上还有其他内容,top的值需要小心处理,最好能够对css样式进行一个初始化,如果不对样式进行初始化,则两边和中间的值会对不齐。 另外,随着浏览器窗口缩小,小于200px的时候,会发生重叠。
一个是优先级的问题,嵌套的越多,css的优先级就越高。那么有时候你需要覆盖其中的css,也可以使用嵌套的方式来进行覆盖。另外一个就是定位的精准,你嵌套的越多,也就说定位的范围就越小,
比如
<div class="a">
<div class="b"></div>
</div>
<div class="b"></div>如果你是直接.b{}的话,那么影响的是两个div的style
如果你是.a .b的话,那么就是只有一个div的影响范围。