位于网格中的div内的绝对定位

Question

我正在尝试CSS网格布局，目前面临一个问题。我想将position: absolute用于位于网格中的div的子节点。如下所示（代码段），红色框设置为position: absolute，并且是.left的子项。

如何制作红色框以便红色框（左侧）在棕色div（右侧）中不会“溢出”？

我尝试将position: relative设置为父元素，但没有结果。

以下是显示问题的简化版本（您可以修改该值以查看分隔符移动）

html,
body,
section {
  height: 100%;
  margin: 0px;
  padding: 0px;
}

.window {
  display: grid;
  grid-template-areas: "first seperator last";
  grid-template-columns: 100px 10px auto;
  /*                     | this one       */
}

.left {
  background: #ff9e2c;
  grid-area: first;
  position: relative;
}

.right {
  background: #b6701e;
  grid-area: last;
}

.separator {
  background: white;
}

.abs-pos {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  top: 100px;
  left: 75px;
}

<section class="window">
  <div class="left">
    <div class="abs-pos"></div>
  </div>
  <div class="separator"></div>
  <div class="right"></div>
</section>

以下是问题的GIF： PS：在实际文件中，我有一个JS脚本，允许我水平移动.separator div以更改两个div的大小：.left和.right。它基本上修改了grid-template-columns: 100px 10px auto的属性.window，因此调整了网格大小。

Answer 1

在overflow: hidden;窗格上设置.left会使红框不会显示在其父级边界之外。

html,
body,
section {
  height: 100%;
  margin: 0px;
  padding: 0px;
}

.window {
  display: grid;
  grid-template-areas: "first seperator last";
  grid-template-columns: 100px 10px auto;
  /*                     | this one       */
}

.left {
  background: #ff9e2c;
  grid-area: first;
  position: relative;
  overflow: hidden;
}

.right {
  background: #b6701e;
  grid-area: last;
}

.separator {
  background: white;
}

.abs-pos {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  top: 100px;
  left: 75px;
}

<section class="window">
  <div class="left">
    <div class="abs-pos"></div>
  </div>
  <div class="separator"></div>
  <div class="right"></div>
</section>

Answer 2

您是否尝试过为您的课程提供z-index

  z-index: -1;

Z索引设置堆栈顺序并使用定位元素。即绝对的，相对的，固定的。

因此，如果您可以将.right和.seperator类放在相对位置，那么它应该有效。

 .right {
     position:relative;
     z-index: 1;
}

 .separator {
     position:relative;
     z-index: 1;
 }

 .abs-pos {
     position:absolute;
     z-index: -1;
 }