Nahoře / dole / vlevo / vpravo - Triky CSS

Anonim

K top, bottom, lefta rightvlastnosti jsou používány v poloze pro nastavení umístění prvku. Mají vliv pouze na umístěné prvky, které jsou prvky s nastavenou positionvlastností na cokoli jiného než static. Například: relative, absolute, fixed, nebo sticky.

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

Můžete jej použít například k posunutí ikony na místo:

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

Nebo umístěte speciální prvek do kontejneru.

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

Hodnota top, bottom, lefta rightmůže být některý z následujících:

  • některou z platných délek CSS
  • procento výšky prvku obsahujícího (pro topa bottom) nebo šířky (pro lefta right)
  • auto
  • inherit

Element se bude obecně pohybovat od dané strany, když je jeho hodnota kladná, a směrem k němu, když je hodnota záporná. V níže uvedeném příkladu topposune kladná délka pro topposunutí prvku dolů (od shora) a záporná délka pro posunutí prvku nahoru (směrem nahoru):

Podívejte se na
začátek pera : kladné a záporné hodnoty od Matsuka Friedlanda (@missmatsuko)
na CodePen.

Pozice

Umístění prvku s hodnotou pro top, bottom, leftnebo rightzávisí na jeho hodnota position. Pojďme se podívat na to, co se stane, když nastavíme stejnou hodnotu pro topprvky s různými hodnotami position.

static

topVlastnost nemá žádný vliv na unpositioned prvků (prvky se positionsadou k static). Takto jsou ve výchozím nastavení umístěny prvky. Dalo by se použít position: static;jako jednu metodu k vrácení účinku topna prvek.

relative

Když topje nastaven na element s positionnastaveným na relative, element se bude pohybovat nahoru nebo dolů ve vztahu k jeho původnímu umístění v dokumentu.

Podívejte se na Pen Pen
: příbuzný Matsuko Friedland (@missmatsuko)
na CodePen.

absolute

Když topje nastaven na prvek s positionnastaveným na absolute, prvek se bude pohybovat nahoru nebo dolů ve vztahu k jeho nejbližšímu předkovému umístění (nebo dokumentu, pokud neexistují žádní umístění předci).

V této ukázce je růžové pole vlevo umístěno 50px dolů z horní části stránky, protože nemá žádné umístěné prvky předků. Růžový box na pravé straně je umístěno 50 pixelů dolů z vrcholu své rodiče, protože rodič má positionna relative.

Podívejte se na Pen
Top: absolute od Matsuka Friedlanda (@missmatsuko)
na CodePen.

fixed

Když topje nastaven na prvek s positionnastaveným na fixed, prvek se bude pohybovat nahoru nebo dolů ve vztahu k výřezu prohlížeče.

Podívejte se na
horní část pera : opraveno CSS-Tricks (@ css-tricks)
na CodePen.

Na první pohled se může zdát, že mezi absolutea není rozdíl fixed. Rozdíl je vidět, když je porovnáte na stránce, která má dostatek obsahu k posouvání. Při posouvání dolů je fixedpoziční prvek vždy v zobrazení, zatímco absolutepoziční prvek se posouvá pryč.

Podívejte se na
posouvání pera : pevné vs. absolutní pomocí CSS-Tricks (@ css-tricks)
na CodePen.

sticky

Když topje nastaven na prvek s positionnastaveným na sticky, prvek se bude pohybovat nahoru nebo dolů ve vztahu k nejbližšímu předku s rolovacím rámečkem (nebo výřezem, pokud žádný předek nemá rolovací rámeček), omezený na hranice jeho obsahujícího prvku.

Nastavení topna stickyumísťovaný prvek moc nedělá, pokud jeho kontejner není vyšší než je a nemáte dostatek obsahu k posouvání. Stejně jako u fixed, prvek zůstane v zobrazení při posouvání. Na rozdíl od fixedtoho prvek vypadne z pohledu, jakmile dosáhne okrajů prvku, který jej obsahuje.

Podívejte se na
posouvání pera : pevné vs. lepivé od CSS-Tricks (@ css-tricks)
na CodePen.

Gotchas

Nastavení protilehlých stran

Můžete nastavit hodnotu pro každou z top, bottom, lefta rightna jednom prvku. Když nastavíte hodnoty pro opačné strany ( topa bottom, nebo lefta right), nemusí být výsledek vždy takový, jaký očekáváte.

Ve většině případů bottomje ignorováno, pokud topje již nastaveno, a rightje ignorováno, pokud leftje již nastaveno. Když je směr nastaven na rtl(zprava doleva), leftje ignorován místo right. Aby každá hodnota měla účinek, musí mít prvek positionnastavenou na absolutenebo fixeda heightnastavenou na auto(výchozí).

In this example, we set top, bottom, left, and right to `20px`, and expect each side of the inner box to be 20px away from the sides of the outer box:

Podívejte se na
Nastavení pera nahoře, dole, vlevo a vpravo od CSS-Tricks (@ css-tricks)
na CodePen.

Pokud není opraveno, není relativní k výřezu

Prvky s positionnastavením na fixednejsou vždy umístěny ve vztahu k výřezu. Bude umístěna vzhledem k jeho nejbližší předchůdce s transform, perspectivenebo filtersadu vlastností na nic jiného, než none, pokud existuje.

Přidání nebo odebrání prostoru

Pokud jste umístili prvek a zjistili jste, že je nyní prázdné místo nebo nedostatek místa, kde jste očekávali, může to souviset s tím, zda je prvek v toku dokumentu nebo mimo něj.

Když je prvek odebrán z toku dokumentu, znamená to, že místo, které původně zabral na stránce, zmizí. To je případ, kdy je prvek umístěn absolutenebo fixed. V tomto příkladu se obsahující pole absolutně umístěného prvku zhroutilo, protože absolutně umístěný prvek byl odebrán z toku dokumentu:

Podívejte se na
tok dokumentů Pen od Matsuka Friedlanda (@missmatsuko)
na CodePen.

Podpora prohlížeče

Můžete se podívat, ale o tuto službu se nemusíte zajímat top. Použijte dle libosti.