Мои относительно позиционируемых дивы Арент реагируют на друг друга границы

Question

у меня есть две дивы не вложены друг в друга

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

и ДИВ 2 стилизован

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

моя проблема, а не в верхней части div2, начиная с нижней части Div 1 его somewh ere в нижней середине div 1, и мой текст находится прямо за ним и не может быть замечен, если я не изменю верх: div2 где-то около 100 пикселей. Есть ли причина, по которой он не позиционирует себя непосредственно под div1? Они оба расположены относительно и должны реагировать друг на друга.

Answer 1

Использование margin-top: 100px; вместо top:100px; в div1. Он выполнит эту работу.

Пример here

top для настройки элемента с использованием position собственности. margin-top предназначен для измерения внешнего расстояния до элемента по отношению к предыдущему. Следовательно, когда вы используете top, ваши div перекрываются друг с другом.

Answer 2

Проверить это удалить верх див1

.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 3

Попробуйте удалить top: 100px, так как это в сочетании с относительной компоновкой будет перемещаться относительно «самого себя» (там, где оно обычно позиционируется), и не будет влиять на соседние элементы. CSS-Tricks on positioning elements взять на себя эту

Если ваша цель состоит в том, чтобы блокировать элементы в сложенной позиции, вы бы лучше удалять position:relative; и использовать clearfix на самих элементах