CSS -uitleg - Die posisie Eiendom
Die positioneienskap spesifiseer die tipe posisioneringsmetode wat vir 'n element gebruik word (staties, relatief, vas, absoluut of taai).
Die posisie Eiendom
Die positioneienskap spesifiseer die tipe posisioneringsmetode wat vir 'n element gebruik word.
Daar is vyf verskillende posisiewaardes:
staticrelativefixedabsolutesticky
Elemente word dan geposisioneer deur die bo-, onder-, linker- en regter-eienskappe te gebruik. Hierdie eiendomme sal egter nie werk nie, tensy die position
eiendom eers gestel word. Hulle werk ook anders na gelang van die posisiewaarde.
posisie: staties;
HTML-elemente is by verstek staties geposisioneer.
Statiese geposisioneerde elemente word nie deur die bo-, onder-, linker- en regter-eienskappe beïnvloed nie.
'n Element met position: static;is nie op enige spesiale manier geposisioneer nie; dit is altyd geposisioneer volgens die normale vloei van die bladsy:
Hier is die CSS wat gebruik word:
Voorbeeld
div.static {
position: static;
border: 3px solid #73AD21;
}
posisie: relatief;
'n Element met position: relative;is relatief tot sy normale posisie geposisioneer.
Deur die bo-, regter-, onder- en linkereienskappe van 'n relatief-geposisioneerde element in te stel, sal dit veroorsaak dat dit weg van sy normale posisie aangepas word. Ander inhoud sal nie aangepas word om in te pas by enige gaping wat deur die element gelaat word nie.
Hier is die CSS wat gebruik word:
Voorbeeld
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
posisie: vas;
'n Element met position: fixed;is relatief tot die viewport geposisioneer, wat beteken dat dit altyd op dieselfde plek bly, selfs al word die bladsy gerol. Die bo-, regter-, onder- en linkereienskappe word gebruik om die element te posisioneer.
'n Vaste element laat nie 'n gaping in die bladsy waar dit normaalweg geleë sou gewees het nie.
Let op die vaste element in die onderste regterhoek van die bladsy. Hier is die CSS wat gebruik word:
Voorbeeld
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width:
300px;
border: 3px solid #73AD21;
}
position: fixed;posisie: absoluut;
'n Element met position: absolute;is relatief tot die naaste geposisioneerde voorouer geposisioneer (in plaas van relatief tot die viewport geposisioneer, soos vas).
Egter; as 'n absoluut geposisioneerde element geen geposisioneerde voorouers het nie, gebruik dit die dokumentliggaam, en beweeg saam met bladsyblaai.
Let wel: Absolute geposisioneerde elemente word uit die normale vloei verwyder, en kan elemente oorvleuel.
Hier is 'n eenvoudige voorbeeld:
Hier is die CSS wat gebruik word:
Voorbeeld
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
posisie: taai;
'n Element met position: sticky;word geposisioneer op grond van die gebruiker se rolposisie.
'n Taai element wissel tussen relativeen fixed, afhangende van die rolposisie. Dit word relatief geposisioneer totdat 'n gegewe offsetposisie in die viewport bereik word - dan "plak" dit in plek (soos posisie:vas).
Let wel: Internet Explorer ondersteun nie taai posisionering nie. Safari vereis 'n -webkit- voorvoegsel (sien voorbeeld hieronder). topJy moet ook ten minste een van , right, bottomof spesifiseer leftvir taai posisionering om te werk.
In hierdie voorbeeld bly die taai element aan die bokant van die bladsy ( top: 0), wanneer jy sy rolposisie bereik.
Voorbeeld
div.sticky {
position: -webkit-sticky; /* Safari */
position:
sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
Posisionering van teks in 'n beeld
Hoe om teks oor 'n prent te plaas:
Voorbeeld
Probeer dit self:
Meer voorbeelde
This example demonstrates how to set the shape of an element. The element is clipped into this shape, and displayed.
All CSS Positioning Properties
| Property | Description |
|---|---|
| bottom | Sets the bottom margin edge for a positioned box |
| clip | Clips an absolutely positioned element |
| left | Sets the left margin edge for a positioned box |
| position | Specifies the type of positioning for an element |
| right | Sets the right margin edge for a positioned box |
| top | Sets the top margin edge for a positioned box |