Obrázek přesahující border – oprava špatného zobrazení

Zrovna jsem na jednom webu řešil skutečnost, kde je logo v hlavičce webu, avšak má nastavený přesah do další sekce za pomoci margin-bottom: -45 px; (například). Následně jsem potřeboval na sekci pod headerem nastavit border, jenže tento bordel se zobrazoval ve vrstvě nad logem, což bylo nežádoucí – logo vypadalo, jako by bylo škrtnuté. Zde nefungoval ani z-index, tak jsem to vyřešil pomocí tohoto kódu, který vytvoří border separátně, na který lze již aplikovat z-index. Nezapomeňte daný header obalit do třídy „.ap-section-border“ a obrázku nastavit větší z-index než 1.

.ap-section-border::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100%;
    border-bottom: 1px solid red; /* Nastavení dolního borderu */
    z-index: 1;
}