Question

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

我有这两个div，我希望纯白色的div直接出现在具有黄色不透明度的那个（但不是直接在角落里，在轮廓的角落）。

如何实现这一目标。我一直在尝试z-index和相对定位，但无济于事。

由于 http://jsfiddle.net/loren_hibbard/WtGsv/

Answer 1

在不使用定位的情况下，我使用负边距为您的内容div添加了一种样式：

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

此处的演示演示：http://jsfiddle.net/WtGsv/3/

我建议在你的.fixed_width div中添加一个id，其中包含.content div，并使用id来给出负边距，这样父div就有负余量，而不是孩子div。

但是如果你想使用绝对定位，我在这里更新了你的jsfiddle： http://jsfiddle.net/WtGsv/12/

基本上，您在要使用其他两个div的position:relative;

周围添加一个父{div} {div}父div

Answer 2

Yuu可以使用position: relative; top -100px，http://jsfiddle.net/WtGsv/1/

或者您可以使用负边距margin-top: -100px http://jsfiddle.net/WtGsv/5/

使用这两种解决方案时，底部的div仍占用最初的空间

请注意，动态添加div不会妨碍您将其置于绝对位置，您只需将父级置于相对位置，并将动态绝对定位的div插入到您想要的位置http://jsfiddle.net/WtGsv/10/

Answer 3

我想你应该重写标记，这很简单，我不知道你是否意识到这一点，但你可以拿起div并将它放在relative定位的容器中，而不是你不需要负利润

Demo

HTML

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

CSS

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

Answer 4

如果将它们都放在父div中，并将其设置为宽度等于黄色框的宽度，则默认情况下，白色框将直接放在下方。

Answer 5

你可以把你想要的div放在你想要的div下面的顶部，然后将它放在父的绝对内部。

示例HTML：

<div id="bottom">
    lorem ipsum

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

</div>

CSS：

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

这是JSfiddle。

另一个div下的div

5 个答案: