Html 另一个 div 下的 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13253834/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
div under another div
提问by 1252748
with css, can I put a div under another div without using absolute positioning?
使用 css，我可以在不使用绝对定位的情况下将 div 放在另一个 div 下吗？
I have these two divs, and I would like the solid white one to appear directly under the one with the yellow opacity (but not direct in the corner, at the corner of the outline).
我有这两个 div，我希望纯白色的一个直接出现在黄色不透明度的下面（但不是直接在角落里，在轮廓的角落）。
How can this be accomplished. I've been experimenting with z-indexand relative positioning, but to no avail.
这怎么可能实现。我一直在尝试z-index相对定位，但无济于事。
采纳答案by Andy
Without using positioning, I added a style to your content div using negative margins:
在不使用定位的情况下，我使用负边距为您的内容 div 添加了样式：
.content {
margin-top:-100px;
}
Working demo here: http://jsfiddle.net/WtGsv/3/
这里的工作演示：http: //jsfiddle.net/WtGsv/3/
I suggest adding an id to your .fixed_widthdiv which houses the .contentdiv though, and using the id to give the negative margin to, that way the parent div has the negative margin, not the child div.
我建议在你的.fixed_widthdiv 中添加一个 id 来放置.contentdiv，并使用 id 给负边距，这样父 div 就有负边距，而不是子 div。
However if you want to use absolute positioning, I have updated your jsfiddle here: http://jsfiddle.net/WtGsv/12/
但是，如果您想使用绝对定位，我已经在这里更新了您的 jsfiddle：http: //jsfiddle.net/WtGsv/12/
Basically, you add a parent div with position:relative;around your other two divs that you want to use position:absolute;
基本上，您在position:relative;要使用的其他两个 div 周围添加一个父 divposition:absolute;
回答by Juan Mendes
Yuu can use position: relative; top -100px, http://jsfiddle.net/WtGsv/1/
Yuu 可以使用position: relative; top -100px，http://jsfiddle.net/WtGsv/1/
or you can use negative margins margin-top: -100pxhttp://jsfiddle.net/WtGsv/5/
或者你可以使用负边距margin-top: -100pxhttp://jsfiddle.net/WtGsv/5/
With both solutions, the div at the bottom still takes space where it would be originally
使用这两种解决方案，底部的 div 仍然占用原来的空间
Note that adding a div dynamically doesn't preclude you from making it absolutely positioned, you just have to make the parent be positioned relative, and the dynamic absolutely positioned div will be inserted right where you want it http://jsfiddle.net/WtGsv/10/
请注意，动态添加 div 并不妨碍您使其绝对定位，您只需要使父级相对定位，并且动态绝对定位的 div 将插入您想要的位置http://jsfiddle.net/ WtGsv/10/
回答by Mr. Alien
I guess you should rewrite the markup, it is very simple, I don't know whether you are aware of this or not but you can pick up the div and place it in a relativepositioned container, than you wont need negative margins
我想你应该重写标记，它很简单，我不知道你是否意识到这一点，但你可以拿起 div 并将它放在一个relative定位的容器中，而不是你不需要负边距
HTML
HTML
<div class="wrap">
Add a line item
<div class="inner_wrap"><textarea></textarea></div>
</div>
CSS
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;
}
回答by Quinny
If you put them both inside a parent div, and set that to have a width equal on the width of the yellow box, then by default the white one would be placed directly below.
如果将它们都放在父 div 中，并将其设置为与黄色框的宽度相等，则默认情况下白色框将直接放置在下方。
回答by fncombo
You can place the div you want to be on top inside the div you want underneath, and position the one on top absolutely inside the parent.
您可以将您想要位于顶部的 div 放在您想要位于下方的 div 中，并将其绝对放置在父级内部的顶部。
Example HTML:
示例 HTML：
<div id="bottom">
lorem ipsum
<div id="top">
hello world
</div>
</div>
CSS:
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%;
}
Here is a JSfiddle.
这是一个JSfiddle。
