CSS overlays – absolutne pozycjonowanie

Napiszemy sobie 2 tzw. overlays na obrazku, w dodatku żeby było trudniej, obrazek będzie linkiem, zaś żeby było ciekawiej, obrazek będzie również absolutnie pozycjonowany. Do dzieła.

Początkowy setup naszego linko-obrazka z pozycją absolute

Obrazek-link, czyli samozamykający się tag <img /> wewnątrz tagu <a>. Do tego wrapper i spany na overlaye, na razie zakomentowane:

<div class="image-wrapper">
<!--<span class="image-source">stocksomething.com</span>
<span class="image-2words">wielki smok atakuje</span> -->
<a href="#"><img src="./codelinelogo.png" alt=""></a>
</div>

Teraz reset stylów CSS, coś, co robimy zawsze (można też w przyszłości dołożyć elementy before i after do naszej gwiazdki, ale na razie tego nie potrzebujemy):

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

Pozycjonujemy absolutnie nasz wrapper na samym środku strony – powinniśmy już wiedzieć jak:

.image-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1000px;
}

Element <a> ma być elementem blokowym i zajmować 100% swojego wrappera:

.image-wrapper a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

Element img ma zajmować 100% szerokości swojego rodzica, czyli <a>:

.image-wrapper img {
    width: 100%;
}

Jeżeli teraz podejrzymy devtoolsy, to zobaczymy, że <img> ma taką dziwną pustą linię, której nie wypełnia, a którą <a> zajmuje. Możemy nadać kolory, aby to lepiej zauważyć.

Pytanie co z tym zrobić. Oszczędzę czytelnikowi szukania i kombinowania:

.image-wrapper img {
    width: 100%;
    vertical-align: bottom;
}

Teraz jesteśmy gotowi na nasze overlaye!

Mały absolutny overlay po prawej – źródło obrazka

Odkomentujemy sobie linijkę ze spanem, który odpowiada za źródło obrazka w naszym kodzie HTML:

<div class="image-wrapper">
 <span class="image-source">stocksomething.com</span>
 <!-- <span class="image-2words">wielki smok atakuje</span> -->
  <a href="#"><img src="./codelinelogo.png" alt=""></a>
</div>

Pozycjonujemy go absolutnie (względem rodzica, jako że rodzic, jakim jest image-wrapper sam ma pozycję absolutną, czyli inną niż static, nasze atrybuty top, left, right i bottom będą się odnosiły do niego, nie strony głównej:

.image-source {
 background: rgba(0,0,0,.7);
 color: #ccc;
 display: inline-block;
 font-size: 11px;
 font-family: helvetica;
 font-weight: 300;
 padding: 5px 8px;
 position: absolute;
 bottom: 0;
 right: 0;
}

W elemencie pozycjonowanym absolutnie bottom i right ustawione na 0 oznaczają zero odstępu od prawego dolnego rogu. Pozycjonowanie absolutne jest względem rodzica, który ma pozycję inną niż static (albo głównego okna, gdy takiego rodzica brak).

To jest kluczowe, aby zapamiętać – nie ma żadnej niepisanej zasady, że aby pozycjonować absolutnie względem rodzica rodzic musi mieć position relative. Relative czyli relatywna, w tym wypadku byłaby o 0 przesunięta od dołu i prawej krawędzi miejsca, w której normalnie by występowała.

Relative często dajemy, gdy nie chcemy wcale elementu przestawiać nigdzie, ale chcemy mu dzieci poprzestawiać absolutnie względem niego. Tutaj akurat mamy inną sytuację – rodzic pozycjonowany absolutnie względem strony, dzieci względem rodzica.

Jak najbardziej można. Idziemy dalej.

Lewy dolny overlay – „newsowy” overlay

Pora odkomentować drugi span i absolutnie względem rodzica wypozycjonować (zaś rodzic jest absolutnie pozycjonowany względem głównego okna):

<div class="image-wrapper">
  <span class="image-source">stocksomething.com</span>
  <span class="image-2words">wielki smok atakuje</span>
   <a href="#"><img src="./codelinelogo.png" alt=""></a>
</div>

Skoro nasz wrapper ma pozycję absolute (czyli pozycję inną niż static) to gdy jego dziecku nadamy absolute, dziecko pozycjonujemy względem rodzica. Względem rodzica zaś to left i bottom na 0 oznacza lewy dolny róg i tam chcemy nasz „newsowy” overlay umieścić:

.image-2words {
  background: rgba(197, 91, 97, .7);
  color: white;
  display: inline-block;
  font-size: 16px;
  font-family: helvetica;
  font-weight: bold;
  text-transform: uppercase;
  padding: 12px 14px;
  letter-spacing: 1px;
  position: absolute;
  bottom: 0;
  left: 0;
}

Jest tu trochę kosmetyki, reszta to pozycjonowanie absolutne, które już teraz powinniśmy całkiem nieźle rozumieć. Pozycjonowanie absolutne dzieci odbywa się względem non-static rodzica albo strony głównej – to pierwsze, co mamy zapamiętać.

Drugie to vertical align i jak budować linki z obrazkiem nadające się do robienia overlayów. Cóż, to przedstawiłem na początku artykułu.

Mogło nam to „vertical align” jednak umknąć, a jest to podchwytliwa rzecz i warto to raz na zawsze zapamiętać, więc polecam wyłączyć to w devtoolsach albo wykomentować i zobaczyć, jak pięknie nam się wszystko popsuje bez tego:

.image-wrapper img {
    width: 100%;
    /*vertical-align: bottom;  BEZ TEGO BĘDZIE SŁABO*/
}

Do następnego razu!