Boxar som hamnar mer eller mindre på samma ställe kan komma att täcka över varandra, du kan till och med skapa osynliga boxar som täcker synliga. Normalt sker detta enligt den vanliga ordningen i HTML, efterkommande täcker över förfäder, men du kan också styra detta med egenskapen z-index.

z-index ges ett värde som är en godtycklig siffra. En box med ett z-index som har en högre siffra hamnar ovanpå en med en lägre siffra.

Egenskapen display talar om hur ett visst element skall visas i boxmodellen.

display: block

Elementet visas på block-nivå, dvs utbrutet ut flödet, som en separat låda

display: inline

Elementet visas inline, utan att bryta flödet, ingen egen låda

display: inline-block

Elementet visas som en låda, men lämnar inte det omgivande flödet

display: list-item

Elementet visas som en del i en lista

display: none

Elementet visas inte. Detta innebär inte bara att det är osynligt, utan att det försvinner ur flödet. Det påverkar alltså inte hur sidan visas. Detta är till exempel praktiskt när man vill göra mobilversioner av sajter där inte allt från den "stora" sajten behöver finnas med.

Det finns nu för tiden många fler möjliga värden till display än vad som listas ovan, men dessa kanske är de vanligaste, som man har mest nytta av.

Du kan hitta mer om alla olika värden till display här (den officiella specifikationen), här (css-tricks.com) eller här (w3schools.com).

Utöver display finns också CSS-egenskapen visibility för att kontrollera hur element visas.

Det mest intressanta värdet till visibility är hidden. visibility: hidden; kommer att göra elementet osynligt, det kommer inte visas. Till skillnad från display: none; kommer ett element med egenskapen visibility: hidden; fortfarande påverka hur resten av sidan visas. Det syns inte, men det finns där…

Exempel här!