CSS Posisionering is meer as net X, Y koördinate
CSS-posisionering is lank reeds 'n belangrike deel van die skep van webbladuitlegte. Selfs met die opkoms van nuwe CSS uitleg tegnieke soos Flexbox en CSS Grid, posisionering nog steeds 'n belangrike plek in enige web ontwerper se sak van die truuks.
Wanneer u CSS-posisionering gebruik, moet u die CSS-eienskap instel vir die posisie om die blaaier te vertel as u absolute of relatiewe posisionering vir 'n gegewe element gaan gebruik. U moet ook die verskil tussen hierdie twee posisionerings eienskappe duidelik verstaan.
Alhoewel absolute en relatiewe is die twee CSS posisie eienskappe wat die meeste gebruik word in webontwerp, is daar eintlik vier state aan die pos eiendom:
- statiese
- absolute
- relatiewe
- vaste
Statiese is die verstekposisie vir enige element op 'n webblad. As jy nie die posisie van 'n element definieer nie, sal dit staties wees. Dit beteken dat dit op die skerm sal vertoon, gebaseer op waar dit in die HTML-dokument is en hoe dit binne die normale vloei van daardie dokument sal vertoon.
As jy posisioneringsreëls toepas, soos bo of na links, na 'n element wat 'n statiese posisie het, sal die reëls geïgnoreer word en die element bly waar dit in normale dokumentvloei voorkom. In waarheid sal jy selde, as ooit, 'n element moet stel vir 'n statiese posisie in CSS, aangesien dit die verstekwaarde is.
Absolute CSS Posisionering
Absolute posisionering is waarskynlik die maklikste CSS-posisie om te verstaan. Jy begin met hierdie CSS posisie eiendom:
posisie: absolute;Hierdie waarde vertel die leser dat alles wat geposisioneer moet word, verwyder moet word van die normale stroom van die dokument en eerder in 'n presiese plek op die bladsy geplaas word. Dit word bereken op grond van die element se naaste nie-staties geposisioneerde voorouer.
Omdat 'n absoluut geposisioneerde element uit die normale stroom van die dokument geneem word, sal dit nie beïnvloed hoe die elemente voor dit of daarna in die HTML op die webblad geplaas word nie.
As voorbeeld, as jy 'n afdeling gehad het wat geplaas is deur gebruik te maak van 'n relatiewe waarde (ons sal binnekort na hierdie waarde kyk) en binne daardie afdeling het u 'n paragraaf gehad wat u 50 pixels van die bokant van die afdeling wou plaas. sou 'n poswaarde van "absolute" by die paragraaf voeg, tesame met 'n verrekenwaarde van 50 px op die "boonste" eiendom.
posisie: absolute; bo: 50px;Hierdie absoluut geposisioneerde element sal dan altyd 50 pixels van die bokant van daardie relatief geposisioneerde verdeling vertoon - maak nie saak wat daar anders in normale vloei vertoon word nie. Jou "absoluut" geposisioneerde element gebruik die relatief geposisioneerde een as sy konteks en die posisioneringswaarde wat jy gebruik, is relatief so.
Die vier posisionerings eiendomme wat jy beskikbaar het, is:
- Top
- reg
- onderkant
- links
U kan bo of onder gebruik (aangesien 'n element nie volgens beide waardes geposisioneer kan word nie) en regs of links.
As 'n element op 'n absolute posisie gestel word, maar daar is geen voorvaders wat nie staties geposisioneer is nie, sal dit geposisioneer word relatief tot die liggaamselement, wat die hoogste vlak van die bladsy is.
Relatiewe Posisionering
Ons het al relatiewe posisionering genoem, dus kyk nou na daardie eiendom.
Relatiewe posisionering gebruik dieselfde vier posisionerings eienskappe as absolute posisionering, maar in plaas van die posisie van die element op sy naaste nie-staties geposisioneerde voorouer te baseer, begin dit van waar die element sou wees as dit nog in die normale vloei was.
As jy byvoorbeeld drie paragrawe op jou webblad het, en die derde het 'n "posisie: relatiewe" styl wat daarop geplaas word, sal die posisie verreken word op grond van die huidige ligging.
Paragraaf 1.
Paragraaf 2.
Paragraaf 3.
In die bostaande voorbeeld sal die derde paragraaf 2em van die linkerkant van die houerelement geplaas word, maar sal steeds onder die eerste twee paragrawe wees. Dit sal in die normale vloei van die dokument bly, en word net effens vergoed. As jy dit verander het na posisie: absolute; enigiets wat daarop volg, sal boonop vertoon word, want dit sal nie meer in die normale vloei van die dokument wees nie.
Elemente op 'n webblad word dikwels gebruik om 'n waarde van posisie te stel: relatiewe met geen verrekening waarde vasgestel nie, wat beteken dat element bly presies waar dit in normale vloei voorkom. Dit word slegs gedoen om daardie element as 'n konteks vas te stel waarteen ander elemente absoluut geposisioneer kan word. Byvoorbeeld, as jy 'n afdeling het wat jou hele webwerf met 'n klaswaarde van "houer" (wat 'n baie algemene scenario in webontwerp is), kan die afdeling in 'n posisie van relatiewe gestel word sodat alles binne-in dit kan gebruik dit as 'n posisioneringskonteks.
Wat oor vaste posisionering?
Vaste posisionering is baie soos absolute posisionering. Die posisie van die element word op dieselfde manier as die absolute model bereken, maar vaste elemente word dan op daardie plek vasgemaak - amper soos 'n watermerk . Al die ander op die bladsy sal dan verby daardie element beweeg.
Om hierdie eiendomswaarde te gebruik, sal jy stel:
posisie: vaste;Hou in gedagte, wanneer u 'n element op u werf regstel, sal dit op daardie plek druk wanneer u webblad uitgedruk word. As jou element byvoorbeeld bo-aan jou bladsy is vasgestel, verskyn dit bo-aan elke gedrukte bladsy, want dit is bo-aan die bladsy vasgestel. U kan media tipes gebruik om te verander hoe die gedrukte bladsye vaste elemente vertoon:
@media skerm {h1 # eerste {posisie: vas; }} @ media druk {h1 # eerste {posisie: staties; }}Oorspronklike artikel deur Jennifer Krynin. Geredigeer deur Jeremy Girard op 1/7/16.