前言
之前遇到過(guò)fixed布局嵌套的一些場(chǎng)景，fixed布局是針對(duì)body定位的纺非，但是在某些特殊情況下鸥鹉，子級(jí)的fixed會(huì)受到父級(jí)fixed的影響布持，除了需要z-index來(lái)區(qū)分層級(jí)，還要注意transform的使用（貌似好多地方transform都會(huì)引發(fā)問(wèn)題）
fixed的使用
一般的場(chǎng)景是一個(gè)遮罩加一個(gè)彈框
<div class="modal">
<div class="content">
<div class="children"></div>
</div>
</div>
.modal {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
height: 100%;
width: 100%;
z-index: 999;
background: rgba(0, 0, 0, .5)
}
.modal .content {
width: 300px;
height: 200px;
background: #fff;
position: absolute;
left: 50%;
top: 50%;
transform: translate3d(-50%, -50%, 0)
}
效果是這樣的
image.png
這個(gè)時(shí)候在內(nèi)部的children再使用fixed布局時(shí)钓账，就會(huì)被父級(jí)的fixed元素限制住
.modal .content .children {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: #123456
}
image.png
解決方法
1、父級(jí)不使用tansform
2絮宁、不進(jìn)行嵌套
