środa, 2020-12-30

Układ pozycjonowany

Jedną z możliwości uzyskania pożądanego układu elementów na stronie jest zastosowanie pozycjonowania absolutnego.

Kod HTML przykładu

Zgodnie z zapowiedzią zastosowany w przykładzie kod HTML to niezmodyfikowane rozwiązanie z materiału „Układ normalny elementów HTML”. Dla przypomnienia zaprezentowano jedynie schematyczny zapis kodu, jego pełną postać można zobaczyć w źródle przykładu.

Schematyczny zapis prezentowanego kodu:

body > div.container >
  ( div.header 
    + div.section > (
          div.main
        + div.aside
      )
    + div.footer
  )

Przykład

Z powodów technicznych prezentowana strona została umieszczona w ramce iframe. Możesz ją otworzyć w pełnym oknie. Chwytając za prawy dolny róg ramki, można przetestować zachowanie przykładowej strony na węższych ekranach.

Kod CSS

Kod CSS bardzo niewiele różni się od zastosowanego w poprzednich materiałach. Najważniejsze dla układu strony deklaracje znajdują się na jego końcu, dodatkowo oznaczono je komentarzami. W przypadku elementów pozycjonowanych absolutnie należy określić obszar odniesienia. W przykładzie jest nim element div.section, który otrzymał własność position ustawioną na wartość „relative”. W przypadku układu składającego się z dwóch kolumn pozycjonowanie absolutne wystarczy zapewnić tylko dla jednej kolumny. Kolumna z lewej strony (div.main) ma ograniczoną szerokość (width: 55%;) i nie wypełnia całkowicie obszaru kontenera (div.section). Element div.aside otrzymał własność position ustawioną na wartość „absolute”, dodatkowymi regułami są „right: 0” oraz „top: 0”, co oznacza, że druga kolumna znalazła się w prawym górnym rogu kontenera (obszaru odniesienia).

Zastosowanie pozycjonowania absolutnego zakłóca normalny układ strony, dlatego czasami powoduje pewne problemy, np. w przypadku konieczności zastosowania odmiennego tła kolumn tworzących układ. W przykładzie zastosowano w tym zakresie bardzo prostą technikę, która sprawdza się akurat w tym przypadku. Założono, że element z prawej strony zawsze będzie mieścił mniej treści, i element z lewej strony otrzymał ciemniejsze tło, a tło prawej kolumny to w rzeczywistości tło elementu nadrzędnego (div.section).

body, div {
  margin: 0;
  padding: 0;
}
body { 
  padding: 30px;
  background-color: #e4d7c1;
}
.container {
  max-width: 960px;
  margin: 0 auto;
}
.header {
  background-color: #a00;
  color: #fff;
  text-align: center;
  padding: 2% 0;
}
.section {
  background-color: #fff;
}
.main {
  background-color: #f2f2f2;
}
.footer {
  background-color: #343434;
  color: #fff;
  text-align: center;
  padding: .5% 3%;
}

/* KLUCZOWE REGUŁY */

.section {
  position: relative;
}
.main, .aside {
  padding: 3% 5%;
  width: 55%;
}
.aside {
  position: absolute;
  right: 0;
  top: 0;
  width: 25%;
}

/* END KLUCZOWE REGUŁY */