CSS

Mer layout: z-index, display och visibility

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 fler möjliga värden till display än vad som listas ovan, men dessa kanske är de vanligaste, som man har mest nytta av.

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 komer inte visas. Till skillnad från display: none; kommer ett elment med egenskapen visibility: hidden; fortfarande påverka hur resten av sidan visas. Det syns inte, men det finns där…