Obrázek v pozadí se nastaví pomocí absolutní pozice. Absolutní pozice ignoruje rozvržení dalších komponent a zároveň blok s absolutní pozicí ignorují ostatní elementy na stránce.
Z-index nám umožňuje nastavit, co bude v popředí a co v pozadí. Z-index funguje vždy relativně k parentovi. To znamená, že pokud budeme mít dvě sekce s různým zanořením, z-index nám pravděpodobně nebude správně fungovat. Je důležité aby byly jednotlivé elementy ve stejném parentovi.
{* Article | Figure *}
<div class="article__figure --flex --flex-column --flex-end-x">
<a class="article__figure-link" href="{$item|link}" n:if="$img">
<img class="article__img" src="{$img}" alt="{$item|name|striptags}">
</a>
<div class="article__author">
</div>
</div>
Article figure je v tomto případě pevně nastavena na 255px, parent absolutního elementu musí mít position:relative, jinak se bude absolutní element pozicovat podle nejbližší ancestor třídy.
Width a height na 100% + object-fit cover se chová stejně jako background-size:cover, umožňuje nám přidat obrázek, který si zachová poměr stran a překryje danou sekci.
Gradient je v tomto případě nastaven jako pseudoelement &::after.
.article__figure {
width: 255px;
height: 255px;
position: relative;
flex-shrink: 0;
z-index: 1;
padding: 18px 25px;
&::after{
@include pseudo(block, absolute);
background: linear-gradient(to top, #000 0%, transparent 60%);
top:0;
left:0;
width: 100%;
height: 100%;
position: absolute;
z-index: 0;
pointer-events: none;
}
}
.article__author{
z-index: 2;
}
.article__img{
position: absolute;
left:0;
top:0;
width: 100%;
height: 100%;
object-fit: cover;
}