Vrije positionering

Stap 1

Voor het laten overlappen van content zijn twee lay-outelementen nodig. We gebruiken hier een Omslagafbeelding die gedeeltelijk overlapt wordt door een gekleurd kader, een Groep.

Begin met het plaatsen van je Omslagafbeelding op de standaardhoogte, zonder verdere aanpassingen.

Stap 2

Plaats een Groep onder je Omslagafbeelding (niet erin). Stel de containerbreedte van de groep in op bijvoorbeeld 600 pixels. In het tabje Styles voeg je padding en een achtergrondkleur toe aan de Groep. Je kunt ook verdere styling aanbrengen naar eigen voorkeur.

Stap 3

Ga terug naar de Settings van je Groep.

Scroll in de rechterbalk naar beneden en open Vrije positionering. Schakel de toggle in om deze te activeren.

Kies Rij toevoegen. Bij Breakpoint kun je de overlap voor verschillende apparaten apart instellen. Op die manier kun je preciezer te werk gaan.

In het voorbeeld gelden vanaf breakpoint 0, dus op alle apparaten, de volgende instellingen: Er zijn vier velden die de richting van de overlap bepalen. Voor het element Groep willen we dat deze over de Omslagafbeelding valt. Stel daarom bovenaan een positionering van -60 pixels in. Let op: als je 60 typt, voeg je een extra marge van 60 pixels toe, wat we hier willen vermijden.

Nu overlappen beide elementen. Je kunt ervoor kiezen om naast de bovenkant ook nog aan de zijkanten (links of rechts) een overlap te creëeren.

De Z-Index pas je alleen aan als bepaalde lay-outelementen op een andere dieptelaag vallen en onder je element komen. Met de Z-Index kun je dit corrigeren door de waarde te verhogen.