CSS Position Property | Forklart

Cascading Style Sheets (CSS) består av et stort utvalg av egenskaper som brukes til å style HTML -elementer, for eksempel brukes fargeegenskapen til å gi tekst som vises på websider litt farge, visning egenskap definerer oppførselen til HTML -elementer, Border Property definerer grensespesifikasjonene til et element, og listen fortsetter. Denne oppskrivningen er imidlertid designet for å kaste lys på posisjonsegenskapen til CSS. Denne guiden dekker følgende.

1. Stillingseiendom
2. Hvordan tilordne relativ posisjonering til et HTML -element
3. Hvordan tilordne absolutt posisjonering til et HTML -element
4. Hvordan gi fast posisjon til et HTML -element

Stillingseiendom

Posisjonsegenskapen til CSS spesifiserer plasseringen av et HTML -element på en webside. Den har den under-nevnte syntaks.

Posisjon: verdi;

Her er et eksempel for ytterligere å demonstrere posisjonseiendommen.

Hvordan tilordne relativ posisjonering til et HTML -element

Dette eksemplet viser den relative verdien av posisjonsegenskapen som plasserer et element med hensyn til den opprinnelige posisjonen.

I dette eksemplet plasserer vi et bilde i en viss stilling ved å bruke den relative verdien av posisjonsegenskapen.

Html

CSS

.bilde
Posisjon: relativ;
Venstre: 80%;
Topp: 0%;
Høyde: 100px;
Bredde: 200px;

Produksjon

Her blir bildet plassert 80% fra venstre for siden med hensyn til den opprinnelige posisjonen.

Standardposisjonen til bildet er som følger.

Det er noen verdier som kan tilordnes plasseringsegenskapen til CSS, som er som følger.

Verdi	Beskrivelse
statisk	Dette er standardverdien som plasserer elementer i henhold til deres posisjon definert i dokumentet.
slektning	Det plasserer et element med hensyn til den opprinnelige posisjonen.
Absolutt	Det plasserer et element med henvisning til plasseringen av elementets forfader.
fikset	Det plasserer et element med hensyn til nettleservinduet.
klissete	Den plasserer et element med referanse til brukerens rulleposisjon.
første	Det plasserer et element til standardverdien.
arve	Det plasserer et element med hensyn til egenskapene som er arvet fra overordnet element.

Noen flere eksempler

For din bedre forståelse har vi illustrert posisjonsegenskapen ved hjelp av noen flere eksempler.

Hvordan tilordne absolutt posisjonering til et HTML -element

Dette eksemplet viser den absolutte verdien av posisjonsegenskapen.

Html

Foreldre Div
Barn Div

Her blir det opprettet to eksempler.

CSS

Foreldre Div har fått tildelt den relative posisjonen, og Child Div har blitt tildelt den absolutte posisjonen. Som vi vet at absolutte verdi posisjonerer et element med hensyn til foreldrenes stilling, derfor for at barnet div skal ha en absolutt posisjon med hensyn til overordnede div, har vi tildelt foreldre div den relative posisjonen.

Produksjon

Barnet Div har blitt plassert i en absolutt posisjon med hensyn til overordnede div.

Hvordan gi fast posisjon til et HTML -element

Dette eksemplet viser den faste verdien av posisjonsegenskapen.

Html

Gul div

Red Div

Grønn div

Vi har opprettet tre elementer en av navnet Yellow Div, andre med navnet Red Div og The Third Div med navnet Green Div.

CSS

.gul
Bakgrunnsfarge:#FFE162;
Bredde: 400px;
Høyde: 500px;

.rød
Bakgrunnsfarge:#FF6464;
Bredde: 300px;
Høyde: 350px;

.grønn
Bakgrunnsfarge:#91C483;
Bredde: 200px;
Høyde: 100px;
Posisjon: Fast;
Venstre: 70%;
Topp: 50%;

P
Polstring: 20px 0;
tekst-align: sentrum;
Font-Family: 'Segoe Ui', Tahoma, Genève, Verdana, Sans-serif

I eksemplet ovenfor er det bare den grønne diven som er tildelt den faste posisjon.

Produksjon

Den grønne diven har fått tildelt den faste posisjoneringen.

Konklusjon

Posisjonsegenskapen til CSS spesifiserer plasseringen av et HTML -element på en webside, dessuten verdiene som dette kan utvise er; statisk som er standardverdien, absolutt verdi posisjonerer et element med hensyn til det overordnede elementet, faste verdiposisjoner et element med hensyn til nettleservinduet, relative verdi posisjonerer et element med hensyn til den opprinnelige posisjonen, og klissete verdiposisjoner et element med Respekt til rulleposisjonen til brukeren. Posisjonsegenskapen og dens forskjellige verdier er illustrert i denne oppskrivningen ved hjelp av eksempler.