防止父级溢出子级

Question

我有 3 个元素：

• 首先，绿色背景。
• 上方是一个蓝色框（覆盖了绿色背景的一部分）。
• 我的黄色和最后一个元素现在应该位于蓝色框上方，但在我的绿色背景下方，而不是蓝色的子元素（由于其他样式）。

我将如何使用 HTML 和 CSS 实现这一目标？ 这里有两个示例图片：

代码示例：

 body { margin: 0; }.first { background-color:green; width: 300px; height: 300px; }.second,.third { width: 200px; height: 200px; position: fixed; }.second { background-color:blue; top: 40px; left: 200px }.third { background-color:yellow; top: 140px; left: 150px; }

 <div class="first"></div> <div class="second"></div> <div class="third"></div>

黄色框应该溢出蓝色框，而不是绿色框（如图 1 所示）。 同时它不应该是 blue 的孩子（原因：我有 skew() 在它上面，在孩子身上倾斜回到正常状态，使它的内容变得模糊。我也尝试过使用 ::before 进行倾斜（ ) 这导致了其他问题，因此黄色不应该是蓝色的孩子）。

这里有一个示例视频：

• 绿框不动
• 蓝色框在滚动时向左移动
• 黄色框在滚动条上向上移动

问题是黄色框溢出了绿色框。 它应该只溢出蓝色的，躲在绿色的后面。 我不能把黄色作为蓝色的孩子，因为我在上面有 skew() ，它（即使向后倾斜）会导致文本模糊和变形。

https://streamable.com/r3v409

Answer 1

您可以像这样重新创建第二个图表。

这里要注意的要点是，绿色框由 2 个伪元素表示，每个伪元素具有不同的 z-index。

我能够让它工作的唯一方法是使用transform旋转其中的 2 个框，同时确保绿色框没有使用 transform，否则会导致重叠/欠重叠失败。

 body{ padding: 100px; } div{ position: absolute; width: 260px; height: 40px; }.green::before, .green::after{ content: ''; position: relative; display: inline-block; height: 100%; width: 50%; background: green; }.green::before{ z-index: 2; }.green::after{ z-index: 0; }.green{ top: 180px; }.yellow{ transform: rotate(300deg); background: yellow; }.blue{ transform: rotate(60deg); background: blue; }

 <div class="green"></div> <div class="blue"></div> <div class="yellow"> Not a child of blue </div>