改变z-index和width但是部分清除兄弟姐妹不重叠？

Question

点击一个方框我希望section中的一个“弹出”与其siblings重叠（类似，我想，是一个模态）。但它不是覆盖其他的，而是清除它们，推动自己或其下面的其他人。我不知道去哪里和谷歌搜索z-index刚刚找到一群忘了设置position的人。

I made a codepen所以你可以看到发生了什么（标题省略）。

调整bottom的{​​{1}}可以将其移动到我想要的位置，但我不确定是否有办法让它找到其父级的左上角它本身，特别是当屏幕可以有很多不同的尺寸时。

Answer 1

使用top:0和left:0定义父级的左上角。

我想通过将此添加到.full-width类：

，我设法获得了您想要的效果

position:absolute !important;
left:0px;

基本上，position绝对会占用页面流中的元素，因此兄弟姐妹及其父母不再考虑自己的位置和维度。