Html 另一个div下的div

有了css，我可以在不使用绝对定位的情况下将一个div放在另一个div下吗

我有这两个div，我希望纯白的div直接出现在不透明度为黄色的div下面（但不直接出现在轮廓的拐角处）

如何才能做到这一点。我一直在试验

z-index

和相对定位，但没有效果

谢谢

---

您可以使用

位置：相对；顶部-100px

或者您可以使用负页边距

页边距顶部：-100px

对于这两种解决方案，底部的div仍然占据了原来的空间

---

请注意，动态添加div并不妨碍您将其绝对定位，您只需将父级相对定位，并且动态绝对定位div将插入到您想要的位置

无需使用定位，我使用负边距向内容div添加了一种样式：

.content {
    margin-top:-100px;
}

在此进行工作演示：

我建议在

.fixed\u width

div中添加一个id，该id包含

.content

div，并使用该id为其提供负边距，这样父div就具有负边距，而不是子div

但是，如果您想使用绝对定位，我在这里更新了您的JSFIDLE：

---

基本上，您添加了一个带有

position:relative的父div

围绕您要使用的其他两个div

位置：绝对
如果将它们都放在父div中，并将其设置为与黄色框的宽度相等，则默认情况下，白色的将直接放在下方。
您可以将要放在上面的div放在下面的div中，并将上面的div绝对放在父div中

HTML示例：

<div id="bottom">
    lorem ipsum

    <div id="top">
        hello world
    </div>

</div>

这是一个。
我想你应该重写标记，它非常简单，我不知道你是否意识到这一点，但你可以拿起div并将其放置在一个相对的容器中，这样你就不需要负边距了


HTML

当有两个元素要显示在同一位置时，绝对定位是常用的解决方案。为什么它对你不起作用？澄清一下，我看到你的小提琴和你一样request@Quentin我不能确定绝对位置，因为这些元素（我在小提琴上的div）将在页面上动态创建。它们并不总是在同一个位置：/n您只需要给它们两个都提供一个父div（包装它们），并将父div设置为
position:relative那么它是如何动态创建的就无关紧要了。@Andy我在我的回答中添加了一个你建议的例子。”。谢谢这在什么浏览器中是可靠的。我似乎还记得在负边距和位置方面遇到过问题，比如在不同的浏览器中反应不同。这是不对的。还有，你能不能用z指数来控制他们的高度，当然，还有其他方法来控制他们的高度。将div与黄色div的输入放在一起似乎无法实现这一点。再次感谢@thomas您必须在目标浏览器中自己测试它，但据我所知，它是可靠的。是的，
z-index
是控制数据堆叠的方式layers@JuanMendes以我为例，但正如你所看到的，父div定位相对仍然允许动态内容。非常感谢你的帮助，Juan。还有所有的例子！我不确定我是否理解这把小提琴。似乎只有一个div。我想我遗漏了一些东西。@thomas你不知道CSS的定位，是的，你可以给-margins，但你可以避免它，
绝对定位div
可以在
相对定位div
内浮动，因此，当您可以以干净的方式完成此操作时，为什么要使用负边距？这是一个真正全面的解决方案。非常感谢你，安迪
#bottom {
    background:red; /* to see dimensions */
    position:relative;
}

#top {
    background:rgba(0, 255, 0, 0.3); /* only to prove that it's on top */
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

<div class="wrap">
    Add a line item
    <div class="inner_wrap"><textarea></textarea></div>
</div>

body {
    background-color: #aaaaaa;
}

.wrap {
    border: 4px dashed #ff0000;
    height: 100px;
    text-align: center;
    line-height: 100px;
    font-size: 20px;
    font-family: Arial;
    position: relative;
}

.inner_wrap {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #919191;
    top: 0;
}