Zgoraj / spodaj / levo / desno - CSS-triki

Anonim

V top, bottom, left, in rightlastnosti se uporabljajo v položaju, da nastavite postavitev elementa. Vplivajo le na pozicionirane elemente, ki so elementi z positionlastnostjo, nastavljeno na kaj drugega kot static. Na primer: relative, absolute, fixed, ali sticky.

div ( : || || auto || inherit; )

Z njo lahko na primer potisnete ikono na svoje mesto:

button .icon ( position: relative; top: 1px; )

Ali pa namestite poseben element znotraj posode.

.container ( position: relative; ) .container header ( position: absolute; top: 0; )

Vrednost za top, bottom, left, in rightje lahko kateri koli od naslednjih pogojev:

  • katero koli veljavno dolžino CSS
  • odstotek višine vsebovanega elementa (za topin bottom) ali širine (za leftin right)
  • auto
  • inherit

Element se bo na splošno oddaljil od dane strani, ko je njegova vrednost pozitivna, in proti njej, ko je vrednost negativna. V spodnjem primeru pozitivna dolžina topelementa premakne element navzdol (stran od vrha), negativna dolžina topelementa pa element premakne navzgor (proti vrhu):

Glej Pen
Top: pozitivne in negativne vrednosti Matsuko Friedland (@missmatsuko)
na CodePen.

Položaj

Postavitev elementa z vrednostjo za top, bottom, left, ali rightje odvisna od njegove vrednosti za position. Oglejmo si, kaj se zgodi, ko nastavimo enako vrednost za topelemente z različnimi vrednostmi za position.

static

topLastnine nima vpliva na unpositioned elementov (elementi z positionnizom do static). Tako so elementi privzeto postavljeni. Lahko uporabite position: static;kot en način, da razveljavite učinek topna element.

relative

Ko topje element nastavljen na element z positionnastavljeno na relative, se bo element premaknil navzgor ali navzdol glede na prvotno umestitev v dokumentu.

Glej Pen
Top: sorodnik Matsuko Friedland (@missmatsuko)
na CodePen.

absolute

Ko topje element nastavljen na element z positionnastavljeno na absolute, se bo element premaknil navzgor ali navzdol glede na najbližjega prednika (ali dokumenta, če ni postavljenih prednikov).

V tej predstavitvi je rožnato polje na levi postavljeno 50 pik navzdol od vrha strani, ker nima postavljenih elementov prednikov. Roza škatla na desni je postavljena za 50 slikovnih pik navzdol od vrha nadrejenega, ker ima nadrejena eno positionod relative.

Oglejte si Pen
Top: absolute avtor Matsuko Friedland (@missmatsuko)
na CodePen.

fixed

Ko topje element positionnastavljen na fixedelement, se element premakne navzgor ali navzdol glede na prikazno polje brskalnika.

Glejte Pen
Top: popravljeno s strani CSS-Tricks (@ css-tricks)
na CodePen.

Na prvi pogled se morda zdi, da med absolutein ni razlike fixed. Razlika je vidna, če jih primerjate na strani, ki ima dovolj vsebine za pomikanje. Ko se pomikate navzdol, je fixedelement položaja vedno v pogledu, medtem ko se absoluteelement položaja pomakne stran.

Glejte Pen
Scrolling: fixed vs absolute by CSS-Tricks (@ css-tricks)
na CodePen.

sticky

Ko topje element nastavljen na element z positionnastavljeno na sticky, se bo element premaknil navzgor ali navzdol glede na najbližjega prednika z drsnim poljem (ali prikazno polje, če noben prednik nima drsnega polja), omejeno na meje njegovega vsebujočega elementa.

Nastavitev topna stickypostavljeno element ne naredi veliko, če je embalaža višji, kot je, in da imate dovolj vsebine, da se premaknete. Tako kot pri fixedelementu, bo tudi med pomikanjem ostal viden. Za razliko fixedod elementa ne bo več viden, ko bo dosegel robove elementa, ki ga vsebuje.

Glejte Pen
Scrolling: fixed vs sticky s strani CSS-Tricks (@ css-tricks)
na CodePen.

Razumem

Nastavitev nasprotnih strani

Lahko nastavite vrednost za vsako top, bottom, left, in rightna enem elementu. Ko nastavite vrednosti za nasprotni strani ( topin bottom, ali leftin right), rezultat morda ni vedno tak, kot pričakujete.

V večini primerov bottomje prezrt, če topje že nastavljen, in rightprezrt, če leftje že nastavljen. Ko je smer nastavljena na rtl(desno proti levi), leftse namesto tega prezre right. Da ima vsaka vrednost učinek, mora imeti element positionnastavljeno na absolutein fixedin heightnastavljeno na auto(privzeto).

V tem primeru smo postavili top, bottom, left, in rightda '20px`, in pričakujejo vsaki strani notranjega prostora, da bi 20px stran od strani zunanjega prostora:

Glejte
Nastavitev pisala zgoraj, spodaj, levo in desno s strani CSS-Tricks (@ css-tricks)
na CodePenu.

Ko je določeno, ni relativno glede na pogled

Elementi z positionnastavljeno fixedvrednostjo niso vedno nameščeni glede na prikazno polje. To bo nameščena glede na svoje najbližje prednika s transform, perspectiveali filterpremoženja, nastavljen na nič drugega kot none, če obstaja.

Dodajanje ali odstranjevanje prostora

Če ste element postavili in ugotovili, da je zdaj prazen prostor ali premalo prostora, kjer ste pričakovali, je morda povezano s tem, ali je element v toku dokumenta ali iz njega.

Ko element odstranimo iz toka dokumenta, to pomeni, da prostor, ki ga je prvotno zasedel na strani, izgine. To je v primeru, ko je element postavljen absoluteoz fixed. V tem primeru se je polje z vsebino absolutno postavljenega elementa strlo, ker je bil absolutno postavljen element odstranjen iz toka dokumenta:

Oglejte si
dokument Pen Pen Matsuko Friedland (@missmatsuko)
na CodePen.

Podpora za brskalnik

Lahko pokukate, vendar glede topnepremičnine ne obstajajo pomisleki med brskalniki . Uporabite po volji.