CSS absolut positionering
- Forrige side CSS relativ positionering
- Næste side CSS flydende
En elementboks, der er sat til absolut positionering, fjernes helt fra dokumentstrømmen og placeres relativt til dens indeholdende blok, som kan være et andet element i dokumentet eller den oprindelige indeholdende blok. Den plads, elementet oprindeligt optog i den normale dokumentstrøm, lukkes, hvilket får det til at se ud som om elementet ikke eksisterede. Efter positionering oprettes en blokboks, uanset hvilken type boks det oprindeligt genererede i den normale strøm.
CSS absolut positionering
Absolut positionering gør elementets placering uafhængig af dokumentstrømmen, og det optager derfor ingen plads. Dette adskiller sig fra relativ positionering, som faktisk betragtes som en del af den normale strøm定位模型，fordi elementets placering er relativ til dens placering i den normale strøm.
Andre elementers layout i den normale strøm ser ud til ikke at eksistere:
#box_relative {
position: absolute;
left: 30px;
top: 20px;
}
som vist i det følgende billede:
positionen af elementer med absolut positionering er relativ tilden nærmeste positionerede forældre, hvis elementet ikke har en positioneret forældre, er dens placering relativ tilDen første indlejrede blok.
Det vigtigste problem med positionering er at huske betydningen af hver type positionering. Så lad os nu gennemgå det, vi har lært: Relativ positionering er "relativt" til elementets oprindelige placering i dokumentet, mens absolut positionering er "relativt" til den nærmeste allerede positionerede forældre, hvis der ikke findes en positioneret forældre, er det "relativt" til den første indlejrede blok.
Kommentar:Afhængigt af brugeragentens forskellige, kan den første indlejrede blok være canvas eller HTML-element.
Tip:Fordi rammerne med absolut positionering ikke er relateret til dokumentstrømmen, kan de dække andre elementer på siden. Dette kan opnås ved at sætte z-index egenskabFor at kontrollere rækkefølgen af disse rammer.
CSS absolut positionerings eksempel
- Position: absolut positionering
- Dette eksempel viser, hvordan man bruger absolute værdier til at positionere elementer.
- Forrige side CSS relativ positionering
- Næste side CSS flydende
