Positioneringselementer på en webside med CSS Position-egenskaben

Kan 4, 2024

Før Cascading Style Sheets var du begrænset med den kontrol, du havde over placeringen af objekter på din webside. Du kunne bruge HTML-tabellen til at kontrollere placeringen lidt, men dette var ikke meget præcist. Nu med CSS kan du have præcis kontrol over, hvordan hvert element er placeret på din webside.

Før du kan bruge egenskaben CSS-position til at placere elementer på din webside, skal vi diskutere terminologien, der bruges til at kommunikere med webbrowseren. CSS overvejer ikke kun bredden og højden på din webside, men også dimensionerne på webbrowseren.

Browserbredde og højde
Først tror du måske, at dette henviser til det åbne browservindue. Men det henviser virkelig til hele browseren inklusive kontrollerne og knapperne.
Levende bredde og højde
Dette er udtrykket for browserens displayområde. Det inkluderer ikke kontrollerne.
Dokumentbredde og højde
Dette er hele bredden og højden på din webside. Hvis disse dimensioner er større end Live-bredden og -højden, viser browseren rullebjælker efter behov.

Nu hvor du kender vilkårene for de grænser, hvor du kan placere delene af din webside ved hjælp af CSS, lad os se på de fire positionsværdier.

Statisk
Dette er standard. Medmindre du angiver andet for et element, bruger browseren statisk positionering. Ligesom det lyder, kan du med statisk positionering ikke flytte elementer på websiden. Så hvordan bestemmer browseren, hvor de enkelte objekter skal placeres på din webside? Det placerer hvert element i den rækkefølge, de forekommer i din HTML-kode. Hvis du har et logo-billede, derefter en hilsen og derefter copyright-meddelelsen i din HTML, placerer browseren disse på websiden i den rækkefølge. Du kan ikke flytte hilsenen over logoet.
I forhold
Relativ positionering fungerer på samme måde som statisk, idet rækkefølgen af elementerne i HTML-koden styrer strømmen af elementerne på siden. Du kan dog bruge relativ positionering til at styre placeringen af et element i forhold til de andre elementer på websiden.
absolutte
Når du bruger absolut positionering med et element, gør dette element uafhængigt af resten af websiden. Da dets placering ikke længere bestemmes af HTML-rækkefølgen, skal du bruge X- og Y-koordinater til at placere elementet.
Fixed
Dette fungerer på samme måde som absolut positionering. Elementet, der har fast positionering, ruller imidlertid ikke med websiden. Dette er en dejlig funktion til brug for et logo eller menu, som du ønsker at forblive synlig, når siden ruller opad.

Video Instruktioner: JavaScript for Web Apps, by Tomas Reimers and Mike Rizzo (Kan 2024).

Positionering af elementer på en webside med CSS Position Property, HTML, CSS, CSS position egenskab, statisk positionering, relativ positionering, absolut positionering, fast positionering, hvordan man placerer elementer på en webside, brug CSS til at placere elementer på en webside

Forrige Artikel

Næste Artikel

Relaterede Artikler

computere

InDesign Content Collectors værktøjer

Kan 2024

Når du opretter design til flere dokumenter, der har samme indhold, kan det være vanskeligt at holde indholdet i hvert dokument opdateret, når der foretages ændringer. InDesignR CS6 har en ny...

computere

Multiple-valg-indtastningsfelter til HTML-formularer

Kan 2024

Hvis du bygger en formular på dit websted og ønsker, at dine besøgende skal vælge mellem en eller flere forvalgte indstillinger, er et indtastningsfelt med flere valg vej til at gå. Radioknappen er...