Question

我有以下html结构。我想展示＆＃34;绿色＆＃34;在＆＃34;容器＆＃34;之上的彩色绝对div格。

＆＃13;

<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>

＆＃13;

以下是此输出。

我想在父母＆＃34;容器＆＃34;之外显示绿色绝对div（在父div中）格。

以下是所需的输出截图。

我正在寻找纯css解决方案，根本没有脚本。

Answer 1

将overflow #container设置为initial可以解决您的问题。请查看以下代码段以供参考。

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 2

无法确定您的确切问题，请更清楚。但是您仍然可以尝试这一点。

＆＃13;

<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: 0px; top:0; height: 220px; width: 120px; background: green;">
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>

＆＃13;

希望这会对你有所帮助。

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

2 个答案: