我想知道为什么display:grid和display:块影响子元素如何相互堆叠?
在下面的代码中,一个外部容器,两个内部子容器。.absolute-position
是绝对位置,而.container
是相对位置。
即使z-index: 10000
上的.blocked
设置不能升高,也不同于容器上的display: block
。
const container = document.querySelector(".container");
function toggle(){
container.classList.toggle("grid");
}
.absolute-position {
position: absolute;
background: white;
top: 10px;
left: 10px;
bottom: 10px;
right: 10px;
}
.grid {
display: grid;
}
.container {
width: 100px;
height: 100px;
background: burlywood;
position: relative;
}
.blocked {
background: #a1c572;
z-index: 10000;
}
<div class="container grid">
<div class="absolute-position"></div>
<div class="blocked">abc</div>
</div>
<button onclick="toggle()">Toggle</button>
如果我理解正确,请尝试以下方法:
我将此添加到.blocked:
position: sticky;
整个代码:
const container = document.querySelector(".container");
function toggle(){
container.classList.toggle("grid");
}
.absolute-position {
position: absolute;
background: white;
top: 10px;
left: 10px;
bottom: 10px;
right: 10px;
}
.grid {
display: grid;
}
.container {
width: 100px;
height: 100px;
background: burlywood;
position: relative;
}
.blocked {
background: #a1c572;
z-index: 10000;
position: sticky;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container grid">
<div class="absolute-position"></div>
<div class="blocked">abc</div>
</div>
<button onclick="toggle()">Toggle</button>