css - 为什么显示：网格改变了元素相互堆叠的方式？

Question

我想知道为什么 display:grid 和 display: block 会影响子元素如何相互堆叠？

在我下面的代码中，一个外部容器，两个内部孩子。 .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>

标签： csspositioncss-grid

Answer 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>