jquery - 更改 z-index 和宽度但部分清除 sibling 不重叠？

Question

在单击一个框时，我希望其中一个 section“弹出”与其 siblings 重叠(我想，类似于模态)。但它并没有覆盖其他人，而是清除了他们，将自己或其他人推到下方。我不确定该去哪里，谷歌搜索 z-index 刚刚找到一群忘记设置 position 的人。

I made a codepen这样您就可以看到发生了什么(标题已省略)。

调整 full-width 的 bottom 可以将它移动到我想要的位置，但我不确定是否有办法让它找到其父项的左上角单独显示，尤其是当屏幕可能有很多不同的尺寸时。

Answer 1

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

我想通过将它添加到 .full-width 类中，我设法获得了您想要的效果:

position:absolute !important;
left:0px;

基本上，position absolute 将一个元素从页面流中移除，因此 sibling 及其父元素不再考虑它们自己的位置和尺寸。