Posunutí obsahu v CSS

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

Margin

.posunuty {
  margin-top: 1em;
}

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

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

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.

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í.

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.

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.

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.

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.

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

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.

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.