Posun obsahu v CSS

V CSS existuje řada možností jak něco někam posunout.

Posunutí obsahu pomocí CSS

Margin

.posunuty {
  margin-top: 1em;
}

Asi nejčastější způsob, jak se elementy odsouvají, je využití vlastnosti margin.

Obsah
Odsunutý obsah

Hodnota marginu může být i záporná, čímž se dají různé elementy dostat přes sebe.

Obsah
Odsunutý obsah překrývá jiný element

V kombinaci s paddingem jde toto chování šikovně využít třeba pro zvětšování klikacích ploch, kdy se hodnota paddingu odečte.

Text jakože tlačítko text

Při používání marginu může být problém, že se jeho hodnoty slučují.

Relativní posicování

.posunuty {
  position: relative;
  top: 1em;
}

Rozdíl relativního posicování od marginu je hlavně v tom, že element s position: relative stále zabírá prostor na původním umístění.

Obsah posunutý relativním posicováním

Transformace translate

.posunuty {
  transform: translate(.5em, .4em);
}

Pro zvýšení rychlosti zejména animací byla zavedena CSS vlastnost transform. Prohlížeče dokáží elementy s transformací lépe optimalisovat. Hlavně díky tomu, že transformace neovlivňuje své okolí. Nefunguje ale v IE 8.

Obsah posunutý transformací translate

Absolutní posicování

Posunu jde docílit i posicováním absolutním. Specifikum této techniky je, že absolutně posicovaný element nebude zabírat místo. Stejně tak se chová i position: fixed, jen je obsah navíc fixovaný na stránce.

Obsah posunutý absolutním posicováním

Padding

Pro posunutí jde použít i padding. Jelikož je padding součástí vnitřku elementu, hodí se spíš při použití pro rodičovský element.

Obsah odsazený paddingem rodičovského elementu.

Výhoda v užívání paddingu před marginem je v tom, že se dokáže díky okrajovému box-modelu (box-sizing: border-box) započítávat do výšky/šířky.

Rámeček border

Jedná se spíš o zřídka využitelnou metodu, ale hodí se v situacích, kdy se margin nemá od čeho odrazit. To se může stát u elementu s clear: both, co je za něčím obtékaným.

Plovoucí obsah
Obsah s clear, kde se margin neprojeví.

Jde to obejít mimo jiné právě nastavením průhledného rámečku.

Plovoucí obsah
Obsah s clear, odsunutý rámečkem.

Stín

Trochu kuriosní způsob je využití stínu – CSS vlastnost text-shadow. Stínem textu bez rozmazání jde v podstatě vytvořit kopii původního obsahu a kamkoliv ji přesunout.

Červená podoba tohoto textu je stín.

Stínů může být víc, čehož využívá:

Nevýhoda je, že stín nejde označit kursorem myši a funguje až v IE 10.

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Skloňování v CSS

„Programování“ v HTML a CSS

I bez úprav logiky serverového skriptu lze lecčeho dosáhnout samotným CSS.

Centrování v CSS

Centrování na webových stránkách

Ucelený popis různých způsobů vertikálního i horizontálního centrování. Se známou i neznámou šířkou nebo výškou.

CSS vyhledávání a filtrování

CSS vyhledávání a filtrování obsahu

Jak pomocí CSS se špetkou JS filtrovat obsah stránky nebo na ní vyhledávat.

Zobrazení popisku při najetí myší

Popisek po najetí myší

Kterak zobrazovat obsah v tooltipu po najetí myši.

Vícenásobné CSS pozadí

Více obrázků na pozadí

Jak v CSS jednomu elementu přiřadit více obrázků na pozadí.

Komentáře