Почему top: 0 не работает с абсолютно позиционированными элементами относительно тела?
Вы можете увидеть в коде ниже, чтоh1
толкает вниз корпус и абсолютно позиционированный блок.absolute
не прилипает к вершине. Но вы также можете видеть, что тот же блок застрял на вершине своего родителя.wrapper
, Зачем?
Я не спрашиваю, как сделать этот трюк; Я знаю как, например вместо этого добавляется отступ к h1 или clearfix для parent и так далее.
Меня интересует только одно: почемуh1
запас толкаетbody
, но не отталкивает.wrapper
?
body {
position: relative;
margin: 0;
padding: 0;
overflow: hidden;
background-color: silver;
}
.absolute {
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 50px;
background-color: darkblue;
}
.wrapper {
position: relative;
overflow:hidden;
width: 50%;
height: 200px;
overflow: hidden;
background-color: yellow;
}
.wrapper > .absolute {
background-color: darkcyan;
}
<div class="absolute"></div>
<h1>Some title</h1>
<div class="wrapper">
<div class="absolute"></div>
<h1>Some title</h1>
</div>
Хорошо, я постараюсь быть более ясным. Если вы нажмете на ссылку ниже, вы увидите мой JSFiddle. Естьbackground-color: silver
вbody
тег. Когда я смотрю в инспекторе кода, я вижу, что тег body начинается немного ниже из-за поля h1. Ноbackground-color
начинается сверху. Это значит, что инспектор кода врет мне, а тело начинается сверху. Но почему же тогда абсолютно позиционируемый элемент, который является прямым потомкомbody
не начать сверху?