我似乎无法像处理其他东西那样使用相对和绝对定位来做到这一点,但我想要实现的是有一个 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 上用于在较小的屏幕上进行垂直滚动。还有什么建议吗?
最佳答案
您可以相对于 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。
关于html - div内的div显示在div外,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28595467/