html - 仅使用 CSS（无 JS）将相对定位的 div 内的元素与溢出自动重叠

Question

我试图用position relativeand重叠另一个 div 内的元素overflow auto。我的目标是将此元素重叠在此父 div 上，保持父 div 的确切样式并仅使用CSS but no JS.

HTML结构

<div class="parent" style="position: relative; width: 400px; height: 400px; background: red; overflow-x: auto;">
    <div class="children" style="position: relative; width: 800px; height: 200px; background: green;">
        <div class="element" style="position: absolute; width: 50px; height: 750px;"></div>
    </div>
</div>

我需要这个elementdiv 与 div 重叠parent。

我也分享codepen链接有一个想法，如果它可以在那里修改：Codepen Example

悬停时蓝色框 [元素 div ] 需要与所有父 div 重叠

希望我提供的信息是解释性的，如果需要更多信息，请告诉我。

---

更多简报：

What's happening 发生了什么

What's expecting 期待什么

---

HTML in codepen

.parent {
  position: relative;
  width: 400px;
  height: 400px;
  background: rgba(255, 0, 0, 0.75);
  overflow-x: auto;
}

.children {
  position: relative;
  width: 800px;
  height: 200px;
  background: rgba(0, 255, 0, 0.75);
}

.children:last-child {
  margin-top: 50px;
  position: relative;
  width: 800px;
  height: 100px;
  background: rgba(0, 255, 0, 0.75);
}

.element {
  position: absolute;
  width: 50px;
  height: 50px;
  background: rgba(0, 0, 255, 0.75);
  transition: all ease-in-out 0.5s;
  -webkit-transition: all ease-in-out 0.5s;
  z-index: 100;
}

.element:hover {
  height: 700px;
}

<div class="parent">
  <div class="children">
    <div class="element"></div>
  </div>
  <div class="children">
    <div class="element"></div>
  </div>
</div>

标签： htmlcssuser-interface