Css 在网格中定位的div内的绝对定位

我正在尝试CSS网格布局，目前面临一个问题。我想使用

position:absolute

作为网格中div的子级。正如您在下面看到的（代码片段），红色框设置为

位置：绝对

，并且是

.left

的子项

如何使红色框在视觉上保持在橙色分区（左侧）中，而不会在棕色分区（右侧）中“溢出”

我尝试将

位置：relative

设置为父元素，但没有结果

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

html，
身体，
部分{
身高：100%；
边际：0px；
填充：0px；
}
.窗户{
显示：网格；
网格模板区域：“第一个分隔符最后一个”；
网格模板列：100px 10px自动；
/*|这个*/
}
.左{
背景#ff9e2c；
网格区域：第一；
位置：相对位置；
}
.对{
背景：#b6701e；
网格区域：最后；
}
.分离器{
背景：白色；
}
.abs pos{
宽度：100px；
高度：100px；
背景色：红色；
位置：绝对位置；
顶部：100px；
左：75px；
}

---

设置

溢出：隐藏.left

窗格上的code>将防止红色框显示在其父级边界之外

html，
身体，
部分{
身高：100%；
边际：0px；
填充：0px；
}
.窗户{
显示：网格；
网格模板区域：“第一个分隔符最后一个”；
网格模板列：100px 10px自动；
/*|这个*/
}
.左{
背景#ff9e2c；
网格区域：第一；
位置：相对位置；
溢出：隐藏；
}
.对{
背景：#b6701e；
网格区域：最后；
}
.分离器{
背景：白色；
}
.abs pos{
宽度：100px；
高度：100px；
背景色：红色；
位置：绝对位置；
顶部：100px；
左：75px；
}

---

您是否尝试给您的类设置z索引

  z-index: -1;

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

所以，如果你能给你的.right和/或.separator类a相对位置，它应该能工作

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

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

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

---

非常感谢你！你知道为什么

overflow:hidden

不起作用，除非我还有

position:relative

？我不是100%确定，但我认为这是因为

position:absolute

导致它比

左
容器的级别更高。因此，由于它是绝对的，并且左侧容器不是
位置：相对的
，因此它根据
定位自身，因此不会隐藏。本质上
位置：相对的
会导致
.left
窗格对红色框说，“基于我的位置，而不是更高的位置”。谢谢你，Harry，我不知道<代码> Z索引<代码>会解决这个问题。唯一的问题是，如果你添加第三个部分，毛茸茸的东西，不是问题的一部分，而是要考虑的问题。