K top, bottom, lefta rightvlastnosti sú používané v polohe pre nastavenie umiestnenia prvku. Majú vplyv iba na umiestnené prvky, čo sú prvky, ktorých positionvlastnosť je nastavená na čokoľvek iné ako static. Napríklad: relative, absolute, fixed, alebo sticky.
div ( : || || auto || inherit; )Môžete ho použiť napríklad na posunutie ikony na miesto:
button .icon ( position: relative; top: 1px; )Alebo umiestnite špeciálny prvok do kontajnera.
.container ( position: relative; ) .container header ( position: absolute; top: 0; )Hodnota top, bottom, lefta rightmôže byť niektorý z nasledujúcich:
- ktorákoľvek z platných dĺžok CSS
- percento výšky prvku obsahujúceho (pre
topabottom) alebo šírky (preleftaright) autoinherit
Prvok sa bude všeobecne pohybovať smerom od danej strany, keď je jeho hodnota kladná, a smerom k nej, keď je jeho hodnota záporná. V nasledujúcom príklade kladná dĺžka pre topposúva prvok nadol (smerom zhora) a záporná dĺžka pre topposúva prvok nahor (smerom hore):
Pozrite si pero
: kladné a záporné hodnoty od Matsuka Friedlanda (@missmatsuko)
na stránke CodePen.
Pozícia
Umiestnenie prvku s hodnotou pre top, bottom, leftalebo rightzávisí na jeho hodnota position. Pozrime sa, čo sa stane, keď nastavíme rovnakú hodnotu pre topprvky s rôznymi hodnotami position.
static
topVlastnosť nemá žiadny vplyv na unpositioned prvkov (prvky sa positionsadou k static). Takto sú predvolene umiestnené prvky. Dalo by sa použiť position: static;ako jednu metódu vrátiť účinok topna elementu.
relative
Keď topje nastavený na element s positionnastaveným na relative, element sa bude pohybovať nahor alebo nadol vo vzťahu k jeho pôvodnému umiestneniu v dokumente.
Pozri pero
: príbuzný, autor: Matsuko Friedland (@missmatsuko)
na stránke CodePen.
absolute
Keď topje nastavený na element s positionnastaveným na absolute, element sa bude pohybovať nahor alebo nadol vo vzťahu k jeho najbližšie umiestnenému predkovi (alebo dokumentu, ak nie sú umiestnení predkovia).
V tejto ukážke je ružové políčko vľavo umiestnené 50 pixelov nadol od hornej časti stránky, pretože nemá žiadne umiestnené prvky predkov. Ružový box na pravej strane je umiestnené 50 pixelov dole z vrcholu svojich rodičov, pretože rodič má positionna relative.
Pozrite si Pen
Top: absolute od Matsuka Friedlanda (@missmatsuko)
na CodePen.
fixed
Keď topje nastavený na element s positionnastaveným na fixed, element sa bude pohybovať nahor alebo nadol vo vzťahu k výrezu prehliadača.
Pozrite si Pen Pen
: opravené CSS-Tricks (@ css-tricks)
na CodePen.
Na prvý pohľad sa môže zdať, že medzi absolutea nie je rozdiel fixed. Rozdiel je vidieť, keď ich porovnáte na stránke, ktorá má dostatok obsahu na rolovanie. Pri posúvaní nadol je fixedpozičný prvok vždy v zobrazení, zatiaľ čo absolutepozičný prvok sa posúva ďalej.
Pozrite si
rolovanie pera : pevné vs. absolútne pomocou CSS-Tricks (@ css-tricks)
na CodePen.
sticky
Keď topje nastavený na element s positionnastaveným na sticky, element sa bude posúvať nahor alebo nadol vo vzťahu k najbližšiemu predchodcovi s rolovacím políčkom (alebo výrezom, ak žiadny predok nemá rolovacie pole), obmedzený na hranice jeho obsahujúceho prvku.
Nastavenie topna stickyumiestnený prvok neurobí veľa, pokiaľ jeho kontajner nie je vyšší ako je jeho veľkosť a vy na jeho posúvanie máte dostatok obsahu. Rovnako ako v prípade fixed, prvok zostane pri rolovaní v zobrazení. Na rozdiel od fixedtoho prvok vypadne z pohľadu, akonáhle dosiahne okraje prvku, ktorý ho obsahuje.
Pozrite si
rolovanie pera : pevné a lepkavé pomocou CSS-Tricks (@ css-tricks)
na CodePen.
Gotchas
Nastavenie protiľahlých strán
Môžete nastaviť hodnotu pre každú z top, bottom, lefta rightna jednom prvku. Keď nastavíte hodnoty pre opačné strany ( topa bottom, alebo lefta right), výsledok nemusí byť vždy taký, aký očakávate.
Vo väčšine prípadov bottomje ignorované, ak topje už nastavené, a rightje ignorované, ak leftje už nastavené. Keď je smer nastavený na rtl(sprava doľava), leftbude ignorovaný namiesto right. Aby mala každá hodnota efekt, musí mať prvok positionnastavenú hodnotu na absolutealebo fixeda heightna hodnotu auto(predvolené).
V tomto príklade sme si stanovili top, bottom, lefta rightna `20px`, a očakávajú, že na každej strane vnútorného poľa bude 20px od strán krabičke:
Pozrite si nastavenie pera
zhora, zdola, zľava a doprava pomocou CSS-Tricks (@ css-tricks)
na CodePen.
Keď je opravené, nesúvisí s výrezom
Prvky s positionnastavením na fixednie sú vždy umiestnené vo vzťahu k výrezu. Bude umiestnená vzhľadom k jeho najbližší predchodca s transform, perspectivealebo filtersadu vlastností na nič iné, než none, ak existuje.
Pridanie alebo odstránenie priestoru
Ak ste umiestnili prvok a zistili ste, že teraz je prázdne miesto alebo nie je dostatok miesta, kde ste očakávali, bude to pravdepodobne súvisieť s tým, či je prvok v toku dokumentu alebo mimo neho.
Keď je prvok vyňatý z toku dokumentu, znamená to, že miesto, ktoré pôvodne zaberal na stránke, zmizne. To je prípad, keď je prvok umiestnený absoluteresp fixed. V tomto príklade sa obsahujúci rámček absolútne umiestneného prvku zrútil, pretože absolútne umiestnený prvok bol odstránený z toku dokumentu:
Prezrite si
tok dokumentov Pen od Matsuka Friedlanda (@missmatsuko)
na stránke CodePen.
Podpora prehľadávača
Môžete sa pozrieť, ale táto topnehnuteľnosť nie je znepokojená rôznymi prehliadačmi . Používajte podľa ľubovôle.