Gore / dolje / lijevo / desno - CSS-trikovi

Anonim

U top, bottom, lefti rightsvojstva koriste se u položaju za postavljanje plasman elementa. Oni imaju učinak samo na pozicionirane elemente, koji su elementi sa positionsvojstvom postavljenim na bilo što drugo osim static. Na primjer: relative, absolute, fixed, ili sticky.

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

Možete ga koristiti, na primjer, da gurnete ikonu na svoje mjesto:

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

Ili postavite poseban element unutar spremnika.

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

Vrijednost za top, bottom, lefti rightmože biti bilo koji od sljedećih uvjeta:

  • bilo koja od valjanih duljina CSS-a
  • postotak visine elementa koji sadrži element (za topi bottom) ili širine (za lefti right)
  • auto
  • inherit

Element će se općenito odmaknuti od zadane strane kada je njegova vrijednost pozitivna, a prema njoj kada je vrijednost negativna. U donjem primjeru pozitivna duljina za toppomiče element prema dolje (dalje od vrha), a negativna duljina za toppomiče element prema gore (prema vrhu):

Pogledajte
Top Pen : pozitivne i negativne vrijednosti Matsuko Friedland (@missmatsuko)
na CodePenu.

Položaj

Plasman element s vrijednošću top, bottom, leftili rightovisi o vrijednosti za position. Pogledajmo što se događa kada postavimo istu vrijednost za topelemente s različitim vrijednostima za position.

static

topNekretnine nema nikakvog utjecaja na unpositioned elemenata (elementi sa positionskupa u static). Ovako su elementi postavljeni prema zadanim postavkama. Možete koristiti position: static;kao jednu od metoda za poništavanje učinka topna element.

relative

Kada topse postavi na element s positionpostavkom relative, element će se pomicati gore ili dolje u odnosu na prvobitno mjesto u dokumentu.

Pogledajte Pen Pen
: srodnik Matsuko Friedland (@missmatsuko)
na CodePenu.

absolute

Kada topse postavi na element s positionpostavljenim na absolute, element će se pomicati gore ili dolje u odnosu na najbližeg pozicioniranog pretka (ili dokument, ako nema pozicioniranih predaka).

U ovoj je demonstraciji ružičasti okvir s lijeve strane smješten 50 piksela od vrha stranice jer nema pozicioniranih elemenata pretka. Ružičasta okvir na desnoj strani se nalazi 50 piksela od vrha svog roditelja, jer roditelj ima positionod relative.

Pogledajte Pen
Top: absolute Matsuko Friedland (@missmatsuko)
na CodePenu.

fixed

Kada topse postavi na element s positionpostavljenim na fixed, element će se pomicati gore ili dolje u odnosu na prikazni okvir preglednika.

Pogledajte
Top Pen : popravio CSS-Tricks (@ css-tricks)
na CodePenu.

Na prvi pogled može se činiti kao da nema razlike između absolutei fixed. Razlika se može vidjeti kada ih usporedite na stranici koja ima dovoljno sadržaja za pomicanje. Dok se pomičete prema dolje, fixedelement položaja je uvijek na vidiku, dok se absoluteelement položaja pomiče.

Pogledajte
Pomicanje olovkom : popravljeno u odnosu na apsolutno pomoću CSS-trikova (@ css-trikovi)
na CodePenu.

sticky

Kada topse postavi na element s positionpostavljenim na sticky, element će se pomicati prema gore ili prema dolje u odnosu na najbližeg pretka pomoću okvira za pomicanje (ili okvira za prikaz, ako niti jedan predak nema okvir za pomicanje), ograničeno na granice njegovog elementa koji sadrži.

Postavljanje topna stickypostavljenim elementa ne čini puno, osim ako njegov kontejner je jači nego što je, i imate dovoljno sadržaja za pomicanje. Kao i kod fixed, element će ostati na vidiku dok se pomičete. Za razliku od toga fixed, element će nestati iz vida kad dosegne rubove svog elementa koji sadrži.

Pogledajte
Pomicanje olovkom : popravljeno ili ljepljivo pomoću CSS-trikova (@ css-trikovi)
na CodePenu.

Shvaćam

Postavljanje suprotnih strana

Možete postaviti vrijednost za svaku od top, bottom, lefti rightna jednom elementu. Kad postavite vrijednosti za suprotne strane ( topi bottom, ili lefti right), rezultat možda neće uvijek biti onakav kakav očekujete.

U većini slučajeva, bottomzanemaruje se ako topje već postavljeno, a rightzanemaruje se ako leftje već postavljeno. Kada je smjer postavljen na rtl(zdesna nalijevo), leftignorira se umjesto right. Da bi svaku vrijednost imati učinak, element mora imati positionset za absoluteili fixedi heightset za auto(zadano).

U ovom primjeru, postavili smo top, bottom, lefti rightza `20px` i očekivati svaku stranu unutarnjeg okvira biti 20px od strane vanjskog okvira:

Pogledajte
Postavljanje olovke gore, dolje, lijevo i desno od CSS-trikova (@ css-trikovi)
na CodePenu.

Kada je fiksno, nije u odnosu na prikazni okvir

Elementi s positionpostavljenim na fixednisu uvijek postavljeni u odnosu na prikazni okvir. To će biti smješten u odnosu na svog najbližeg pretka sa transform, perspectiveili filtersvojstvo postavljeno na bilo što drugo osim none, ako postoji.

Dodavanje ili uklanjanje prostora

Ako ste pozicionirali element i ustanovili da je sada prazan prostor ili nema dovoljno prostora tamo gdje ste očekivali, to može imati veze s tim je li element u toku protoka dokumenta ili izvan njega.

Kada se element izvadi iz toka dokumenta, to znači da nestaje prostor koji je izvorno zauzeo na stranici. To je slučaj kada je element pozicioniran absoluteili fixed. U ovom primjeru, okvir s sadržajem apsolutno pozicioniranog elementa se srušio jer je apsolutno pozicionirani element uklonjen iz toka dokumenta:

Pogledajte
Tok dokumenata olovke Matsuka Friedlanda (@missmatsuko)
na CodePenu.

Podrška preglednika

Možete zaviriti, ali ne postoji zabrinutost za više topvlasnika. Koristite po volji.