Question

我似乎无法通过相对和绝对定位来做到这一点，就像我对其他事情一样，但我想要实现的是有一个div，其中有另一个div，但是这个内部div必须出现在屏幕上的外部div。

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

div placements

编辑：好的，所以我认为这比人们想的要复杂得多。使用位置相对和绝对我已经让我的页面上的其他东西工作。当我使用定位尝试此问题时，我所拥有的是

Second Description

然后在外部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是我的问题，问题是覆盖我已经在.ItemList上使用的overflow-x和overflow-y，以便在较小的屏幕上进行垂直滚动。还有其他建议吗？

Answer 1

您可以absolute对div内部body进行* { 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

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

Answer 2

如果这是理想的结果，我觉得你不应该用这种方式构建你的HTML：为什么不把内部div放在父级的层次结构之外呢？无论哪种方式，这样的事情应该有效：

<body>
    <div id="outer">
        <div id="inner">
        </div>
    </div>
</body>

和CSS

#body
{
    position:relative;
}
#inner
{
    position:absolute;
    right:0;
    top:30px;
}

Answer 3

您需要使用position规则来设置要在彼此之间显示的元素。

＆＃13;

#Outer {
 position: relative;
 width: 300px;
 height: 180px;
 border: 3px solid red;
}

#Inner {
 position: absolute;
 width:  50%;
 height: 50%;
 border: 3px solid blue;
 margin: 5%;
}

＆＃13;

<div id="Outer">
  <div id="Inner"></div>
</div>

＆＃13;

Answer 4

编辑： 由于溢出-x：隐藏;

而消失

上一个： http://jsfiddle.net/1k1rfrn3/
你应该避免用CSS攻击你的DOM。

.OuterDiv{
border-style: solid;
border-width: 5px;
color: blue;
position:absolute;
overflow: visible;
}
.InnerDiv{
border-style: solid;
border-width: 5px;
color:red;
position:absolute;
left:500px;
}

Answer 5

试试这个：

.OuterDiv{ position:relative; width:80px; height:80px; border:5px solid green }
.InnerDiv{ position:absolute; top:0; right:-100px; width:80px; height:80px; border:5px solid red }

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

div内的Div显示在div之外

5 个答案: