Nachodzące na siebie divy

Question

Hej,

jestem w trakcie tworzenia strony, gdzie na wejściu jest zdjęcie na całą szerokość i wysokość ekranu, wiec zrobilem diva i korzystam z atrybutu overflow, żeby ukryć to co "wystaje"

#top-img
{
  width: 100%;
  height: 100%;
  z-index:-1;
  background: url("../img/bg2.jpg") no-repeat top center;
  overflow:hidden;
}

W tej sytuacji, ładuje się tyle obrazka ile treści jest w tym divie, tzn jeśli napisze jednolinijkowy tekst to załaduje się 16px pasek obrazka z tekstem. Problem rozwiązuje dodanie 

position: absolute;

i tu zaczyna się problem, bo po dodaniu kolejnych divów nizej, juz jako cialo strony, te dodane divy, mimo że nie mają nic wspólnego, nachodzą na obrazek, tak jakby diva #top-img nie było. Myśle, że pewnie to przez atrybut 

position: absolute;

Chcę, żeby ciało strony układało się pod obrazkiem po prostu.

Co robię źle ?

Pozdrawiam!

Answer 1

Problem polega na tym, że height: 100% działa tylko wówczas jeśli rodzic ma ustaloną wysokość - w Twoim zapewne nie ma, przez co się nie rozciąga. Proponuję wywalić position: absolute i nadać temu elementowi height: 100vh, co rozciągnie go na całą wysokość ekranu.

Comments

Nachodzenie innych divów (jeśli dobrze zrozumiałem o co chodzi) może być spowodowane ujemnym z-index.

---

Mistrz! Działa

Dzięki wielkie Comandeer!