css - 放置在另一个 div 底部的 div 上，相对

Question

我有 2 个 div，我希望其中一个相对地出现在另一个的底部。

<div class="div1">
 <div class="div2">
 </div>
</div>

CSS 代码：

.div1
{
 position: relative; 
}
.div2
{
 position: relative; 
 bottom: 0;
}

由于某种原因，div2 出现在 div1 的顶部。（改变绝对没有帮助，因为我希望 div2 在调整整个页面大小时用 div1 调整大小）。我该怎么做？

Answer 1

您需要将内部 div 上的 position:relative 更改为 position:absolute 并在 div 上添加一些宽度/高度：http: //jsfiddle.net/H7kq6/1/

.div1
{
 position: relative;
    background:pink;
    height:100px;
    width:200px;
}
.div2
{
    background:#ccc;
 position: absolute;
 bottom: 0;
    height:10px;
    width:200px;
}

Answer 2

你是对的，但是根据你的 CSS 有一个错误，HTML 应该是这样的：

<div id="div1">
    first div
    <br /> 
    <br />
 <div id="div2">
     second div
 </div>
</div>

http://jsfiddle.net/saidbakr/3uRuM/