html - 位置绝对子 div 的 CSS 显示在相对父 div 之外

Question

我有以下 html 结构。我想在“容器”div 之上显示“绿色”彩色绝对 div。

<h4>
  CSS Position Issue
</h4>
<div id="container" style="overflow: auto;height:55px;width:200px;border:3px solid blue;position:relative">
  <ul>
    <li>
      <div style=";border:1px solid blue;">
        <div style="height: 100px; width: 100px; background: red;">
          if there is some really long content here, it will cause overflow, but the green box will not
          <div style="position:absolute; z-index:-1; left: 60px; top:0; height: 220px; width: 120px; background: green;">
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>

下面是这个的输出。

我想显示绿色绝对 div(在父 div 内部)显示在父“容器”div 之外。

下面是所需的输出屏幕截图。

我正在寻找完全没有脚本的纯 css 解决方案。

Answer 1

将 #container 的 overflow 设置为 initial 可以解决您的问题。检查下面的代码片段以供引用。

#container {
  overflow: ;
  height: 55px;
  width: 200px;
  border: 3px solid blue;
  position: relative
}

.border {
  border: 1px solid blue;
}

.parent {
  height: auto;
  width: 100px;
  background: red;
}

.child {
  position: absolute;
  z-index: -1;
  left: 60px;
  top: 0;
  height: 220px;
  width: 200px;
  background: green;
}

<h4>
  CSS Position Issue
</h4>
<div id="container">
  <ul>
    <li>
      <div class="border">
        <div class="parent">
          if there is some really long content here, it will cause overflow, but the green box will not
          <div class="child">
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>