CSS Positioning ass méi wéi just X, Y Koordinaten
CSS Positioning ass laang eng wichteg Roll am Site vun de Websäiten ze schafen. Och mat der Vergaangenheet vun neie CSS-Layout-Techniken wéi Flexbox a CSS Grid, huet d'Positionéierung nach ëmmer e wichtege Plaz an engem Webdesigner Bag vun Tricks.
Wann Dir d'CSS Positioning benotzt, da musst Dir d'éischt d'CSS-Eigenschaft positionéieren fir de Browser ze soen, wann Dir absolut oder relativ Positionéiere fir e bestëmmten Element benotze kënnt. Dir musst och de Differenz tëschent dësen zwou Positiounen ze verdeelen verstoen.
Während absolutt an relativ sinn déi zwee CSS Positionsimmobilien am meeschten am Webdesign benotzt ginn, sinn ett eigentlech véier Staaten zu der Positiounspositioun:
- statesch ass
- absolutt sinn
- relativ
- fest
De statesche ass d'Standardpositioun fir all Element op enger Websäit. Wann Dir d'Positioun vun engem Element net definéiert, da wäert et statesch sinn. Dëst bedeit datt et am Bildschierm op der Platz steet, wou et am HTML-Dokument ass a wéi et am normale Floss vun dësem Dokument kënnt.
Wann Dir Positionsregeln wéi Uewen oder lénks op e Element applizéiert, deen eng statesch Positioun huet, ginn dës Regele ignoréiert an d'Element bleiwen, wou et am normale Dokumentastrof erscheint. An der Wahrheet, Dir wéilt iergendeppes wann et jemols e Element an eng statesch Positioun op CSS setzen muss, well dat ass de Standardwert.
Absolut CSS Positioning
Absolut Positioning ass wahrscheinlech déi einfachst CSS Positioun ze verstoen. Dir sidd mat dëser CSS-Positioun Eegeschafte beginn:
Positioun: absolutDëse Wäert weist de Browser datt ëmmer alles geännert soll aus de normale Flëss vum Dokument ausgehönt ginn an amplaz e genaue Standuert op der Säit. Dëst gëtt berechnet op Basis vun deem Element am nootsten non-statesch Positoun.
Well en absolut positionéiert Element aus der normaler Ausféierung vum Dokument erausgezunn ass, wäert et net beaflossen, wéi d'Elementer virun oder nodeems et an der HTML op der Websäit positionéiert ass.
Als Beispill - wann Dir eng Divisioun gehat hätt, déi mat engem Wäert vun relatif positionéiert gouf (mir wäerten dëse Wäert kuerz halen), an an deem Divisiounen hutt Dir e Paragrap an Dir wollt 50 Pixelen vun der Spëtzt vun der Divisioun positionéieren, géif ech e Positoun Wert vun "absolut" zu deem Paragrapus mat enger Offsetwäert vu 50px op der "Top" Eigenschaft addéieren, wéi dat.
Positioun: absolut Top: 50px;Dëse ganz positionéierten Element géing ëmmer 50 Pixelen aus der Spëtzt vun der relativ geréng positionéierter Divisioun weisen - egal wéi et an der normaler Ausdehnung gëtt. Äre "absolut" positionéierte Element benotzt den relativ positionéierte wéi säin Kontext an de Positivniveau, deen Dir benotzt, ass dat relativ.
Déi véier Positionsimmobilien déi Dir verfügbar hutt, sinn:
- erop
- riets
- ënnen
- lénks
Dir kënnt entweder Top oder Bottom benotzen (well en Element net däerf an deem seng Wäerter positionnéieren) an och net richteg oder lénks.
Wann e Element op eng Positioun vun der absoluter Säit gesat gëtt, awer do huet et keng non-statesch Positiounen, déi d'Vorfahren hunn, da gëtt se relativ zum Kierperelement positionéiert, wat ass den héchsten Niveau vun der Säit.
Relativ Positiouning
Mir hu scho fréi relativer Positiounsbezeechnung genannt, also lass d'Wuert elo kucken.
Relative Positionéierunge benotzt déi selwëcht Véier Positiéiteigenschaften als absolute Positionéierung, awer unstelle vun der Positioun vum Element op säi noostege net-statesch positionéierte Vorfahren, fänkt un aus deem wou d'Element wier wann et am normale Floss war.
Zum Beispill, wann Dir 3 Paragrafen op der Websäit hutt an d'Drëtt eng "Positiv: Relativ" Stil opgeholl huet, ass d'Positioun op der aktueller Location opgefouert.
Ziffer 1.
Ziffer 2.
§ 3.
An dësem Beispill gëtt de drëtte Paragraphe 2em vun der lénkser Säit vum Containerelement positionéiert, awer nach ëmmer ënner de zwee zwou Absätze. Et géif an der normaler Ausdehnung vum Dokument bleiwen a nëmmen liicht versat ginn. Wann Dir dëst geännert huet: absolut; Alles wat duerno ass et op där Säit ze weisen, well et net méi am normalen Flux vum Dokument géif ginn.
Elementer op enger Websäit ginn oft benotzt fir e Wäert vun der Positioun ze setzen: relativ ouni Offset-Wäerter, deen heescht datt dëst Element exakt wou et am normale Floss erscheint. Dëst ass nëmme gemaach fir dëst Element als Kontext ze setzen, an deem aner Elementer absolut positionéiert kënne ginn. Zum Beispill, wann Dir eng Divisioun ronderëm Är ganz Websäit mat engem Klasswert vun "Container" (wat e ganz allgemenge Szenario am Webdesign ass), kann dës Divisioun op eng Plaz vun der Relatioun festgesat ginn fir datt alles an der Saach benotzt ka ginn et as e Konstellatioun vum Positionéierungssystem.
Wat fir eist Fixed Positioning?
Fixed Positioning ass vill wéi absolute Positionéierung. D'Positioun vum Element gëtt an der selwechter Aart berechtegt wéi de absolute Modell, mä feste Elemente ginn dann an deem Standuert - bal wéi e Wasserzeichen . Alles wat se op der Säit wäerte sinn dann an deem Element.
Fir dës Eigenschaft Wäerter ze benotzen, giff Dir wielen:
Positioun: fix;Denkt drun, wann Dir e Element an Ärem Site fixéiert, da gëtt se op där Plaz gedréckt wann Är Websäit ausgedréckt gëtt. Zum Beispill, wann Äert Element an der Spëtzt vun der Säit fixéiert ass, gëtt et am Top vun all gedréckter Säit ze gesinn - well et op d'Säit uewen steet. Dir kënnt Medientypen benotzen fir ze änneren wéi d' gedréckte Säiten fixe Elementer weisen:
@ media screen {h1 # éischter {gülteg: fest; }} @media print {h1 # éischter {Positioun: statesch; }}Original Artikel vum Jennifer Krynin. Edited by Jeremy Girard am 1/7/16.