Почему блоки лезут друг на друга?

Question

[Jedi]

Почему то main "наезжает" на header. Почему так происходит ? помогите пожалуйста

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: Arial;
    color: #666;
}

#app {
    display: inline-block;
}

header {
    position: absolute;
    top: 0;
    width: 100%;
    height: 400px;
    color: #333333;
    line-height: 108px;
}

.logo {
    float: left;
    margin-left: 5%;
    margin-top: 5px;
    padding-left: 90px;
}

header nav {
    font-size: 18px;
    float: right;
    margin-right: 5%;
}

header nav a {
    color: #333;
    margin: 0 5px;
    text-decoration: none;
}

main {
    position: absolute;
    width: 100%;
    display: block;
    margin: 0;
}

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 40px;
    background: #666;
    color: #fff;
    font-size: 18px;
}

Заранее спасибо!

Answer 1

[Ihor Gevorkyan]

Чем обосновано использование абсолютного позиционирования?
В данном случае, добавьте к селектору main правило top: 400px;

Но, честно, я не понимаю, зачем Вы усложняете задачу себе и следующим разработчикам, которые будут работать с этим кодом. Абсолютное позиционирование нужно использовать с умом, для таких, обычных, целей, оно не нужно.

Comments

[Jedi]

можете отправить как сделать лучше ? Спасибо в любом случае!

[Роман Савчук]

PHPjedi, рекомендую Вам использовать какой-либо css-фреймворк, например: bootstrap
Вы будете div`ам задавать классы фреймворка, и они будут позиционироваться более чем правильно.

[Jedi]

Роман Савчук, спасибо!

[Ihor Gevorkyan]

PHPjedi, смотрите тут. В Вашем случае, не обязательно писать

html,
body {
  height: 100%;
}

т.к. это хак, специально для codepen.

[Ihor Gevorkyan]

PHPjedi, и normalize не забудьте подключить

[Ihor Gevorkyan]

PHPjedi, ну и, да, если Вы не настроены серьёзно на изучение верстки, то используйте bootstrap, только используйте его, как в документации описано. Тогда Вам и normalize не нужен будет (он там внутри уже). Но, для Вашей задачи, а как я понял - это прижатый к концу страницы подвал, у bootstrap 3-го нет решения.

Answer 2

[Максим]

ну вот у вас все элементы имеют : position:absolute; top:0; это означает что вы приказали им всем встать в самом вверху top:0; и при всём при том что нету элемента родителя который должен быть position:relative