CSS fixed 布局嵌套的一些问题

html-css030

CSS fixed 布局嵌套的一些问题,第1张

之前遇到过 fixed 布局嵌套的一些场景， fixed 布局是针对 body 定位的，但是在某些特殊情况下，子级的 fixed 会受到父级 fixed 的影响，除了需要 z-index 来区分层级，还要注意 transform 的使用（貌似好多地方 transform 都会引发问题）

一般的场景是一个遮罩加一个弹框

效果是这样的

这个时候在内部的 children 再使用 fixed 布局时，就会被父级的 fixed 元素限制住

1、父级不使用 tansform

2、不进行嵌套

<center>

<div class="c2">

<div class="c1">

asd

</div> <img src="./reg_bg.jpg" width="1300px" height="950px">

</div>

</center>

<div class="box">

<div>

<div>

<div class="contont">内容</div>

</div>

</div>

</div>

一般情况下是会设置一个类名来进行设置样式的，

像这样可以通过子代选择器来设置，例如:

.box>div>div>div{color:#f00} 但是假如最里层有多个div那也会被设置当前样式，所以这样虽然可以设置到，但是不合理。

通过后代选择器来设置： .box .contont{ color:#f00} 这样就是设置自代类名为 .contont的盒子了。