Absolute posisionering sonder koördinate in CSS
Om koördinate tydens absolute posisionering
te spesifiseer is eintlik nie verpligtend nie.
As 'n element bloot position met die waarde
absolute kry, sal dit absoluut geposisioneer word,
maar sal dit steeds op dieselfde plek bly staan waar dit
oorspronklik was. Intussen sal alle ander elemente
optree asof ons element nie daar is nie
en kan daaroor beweeg.
Kom ons kyk na voorbeelde.
Voorbeeld
Laat ons eers drie blokke sonder enige posisionering maak met 'n bietjie teks tussenin:
<div id="elem1"></div>
<div id="elem2"></div>
teks teks teks teks teks teks
<div id="elem3"></div>
#elem1 {
width: 200px;
height: 150px;
border: 1px solid red;
}
#elem2 {
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
Voorbeeld
Laat ons nou absolute by die groen blok voeg.
As gevolg hiervan sal hierdie blok op sy plek bly,
en alle elemente onder sal optree asof
ons element nie daar is nie en daaroor beweeg:
<div id="elem1"></div>
<div id="elem2"></div>
teks teks teks teks teks teks
<div id="elem3"></div>
#elem1 {
width: 200px;
height: 150px;
border: 1px solid red;
}
#elem2 {
position: absolute;
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
Voorbeeld
Laat ons nou die eienskap left byvoeg,
sonder om 'n vertikale posisie te spesifiseer.
Die gevolg is dat ons blok horisontaal
na die gespesifiseerde waarde sal beweeg,
maar vertikaal sal dit bly staan
waar dit oorspronklik was:
<div id="elem1"></div>
<div id="elem2"></div>
teks teks teks teks teks teks
<div id="elem3"></div>
#elem1 {
width: 200px;
height: 150px;
border: 1px solid red;
}
#elem2 {
position: absolute;
left: 40px; /* voeg horisontale posisie by */
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
Voorbeeld
Kom ons voeg nou, omgekeerd, die eienskap
top by, sonder om 'n horisontale posisie te spesifiseer.
Die gevolg is dat ons blok vertikaal
na die gespesifiseerde waarde sal beweeg,
maar horisontaal sal dit bly staan
waar dit oorspronklik was:
<div id="elem1"></div>
<div id="elem2"></div>
teks teks teks teks teks teks
<div id="elem3"></div>
#elem1 {
width: 200px;
height: 150px;
border: 1px solid red;
}
#elem2 {
position: absolute;
top: 100px; /* voeg vertikale posisie by */
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
