为什么显示:网格改变了元素相互堆叠的方式?

问题描述 投票:-1回答:1

我想知道为什么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>
css position css-grid
1个回答
1
投票

如果我理解正确,请尝试以下方法:

我将此添加到.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>
© www.soinside.com 2019 - 2024. All rights reserved.