我相对定位的divs对彼此的边界没有反应

Question

我有两个没有互相嵌套的div

<div1> </div>


<div2>Hey! Text here </div>

div 1只是一个我称之为的白盒子。

position: relative;
color: #ffffff;
margin: 0px auto;
width: 1020px;
height: 400px;
background-color: #ffffff;
top: 100px;

和div 2的样式为

font-size: 12px;
position: relative;
text-align: left;
color: #ffffff;
margin: auto;
top: 25px;
left: 25px; 

我的问题是，而不是div2的顶部从div 1的底部开始，它位于div 1的中间位置，我的文本直接位于它后面，除非我将div2更改为某处，否则无法看到它大约100px。有没有理由将它自己直接定位在div1下面？它们都是相对定位的，应该互相作出反应。

Answer 1

选中此项删除div1顶部

.div1{
    position: relative;
color: #000;
margin: 0px auto;
width: 1020px;
height: 400px;
background-color: #ffffff;
    border:1px solid #000;
}

检查此链接 http://jsfiddle.net/nikkirs/7q1mk10k/9/

Answer 2

在margin-top: 100px;使用top:100px;代替div1。它会完成这项工作。

示例here

top用于调整使用position属性的元素。 margin-top用于测量与元素相关的外部距离。因此，当您使用top div彼此重叠时。

Answer 3

尝试删除top: 100px，因为这与相对布局相结合将相对于“自身”（通常位于其中）移动，并且不会影响相邻元素。 CSS-Tricks on positioning elements接受此

如果您的目标是将块元素放在堆叠位置，那么最好删除position:relative;并在元素本身上使用clearfix