html - div内的div显示在div外

Question

我似乎无法像处理其他东西那样使用相对和绝对定位来做到这一点，但我想要实现的是有一个 div，其中有另一个 div，但是这个内部 div 必须出现在屏幕上的外部 div。

<div class="OuterDiv">
    <span>Other things</span>
    <div class="InnerDiv">
        <span>Inner content</span>
    </div>
</div>

编辑:好的，所以我认为这比人们想象的要复杂。使用相对位置和绝对位置，我已经在我的页面上得到了其他东西。当我使用定位尝试这个问题时，我得到的是

然后当移动到外部 div 之外足够远时完全消失

更多我的代码，

<div class="Item Menu Active" style="display: inline-block;">
<div class="ItemList" style="left: -315.859375px;">
    <div class="Item" style="display: inline-block;">
        <span>N</span>
        <div class="ItemList">
        </div>
    </div>
    <div class="Item" style="display: inline-block;">
        <span>O</span>
        <div class="ItemList">
        </div>
    </div>
    <div class="Item" style="display: inline-block;">
        <span>P</span>
        <div class="ItemList">
            <div class="Item ClickItem">
                <span>p1</span>
                <div class="ItemList">
                </div>
            </div>
        </div>
    </div>
    <div class="Item" style="display: inline-block;">
        <span>Q</span>
        <div class="ItemList">
        </div>
    </div>
</div>
</div>

.Item {
display: inline-block;
position: relative;
white-space: nowrap;
padding: 5px 10px 5px 10px;
cursor: pointer;
}
.ItemList {
display: none;
z-index: 1;
min-width: 75px;
position: absolute;
top: 100%;
left: 0px;
overflow-y: scroll;
overflow-x: hidden;
white-space: initial;
padding: 5px 5px 5px 5px;
background-color: white;
border: 1px solid black;
cursor: default;
}

编辑 2:是的 overflow:visible 是我的问题，问题是覆盖了我的 overflow-x 和 overflow-y已经在 .ItemList 上用于在较小的屏幕上进行垂直滚动。还有什么建议吗？

Answer 1

您可以相对于 body 将 absolute 定位在内部 div 中，如下所示:

* { box-sizing: border-box; }

html {
  height: 100% }

body {
  position: relative;
  padding: 10px;
  min-height: 100%;
  margin: 0;
  border: 10px solid red; }

.OuterDiv {
  width: 50%;
  border: 10px solid green; }

.InnerDiv {
  position: absolute;
  width: 20%;
  right: 10px;
  border: 10px solid blue; }

<div class="OuterDiv">
    <span>Other things</span>
    <div class="InnerDiv">
        <span>Inner content</span>
    </div>
</div>

请注意，在这种情况下，您必须确保 body 足够高以包含绝对定位的 inner div。