CSS: Rozdíl mezi vlastnostmi pozic

V mém předchozím příspěvku jsem psal o stavu displeje a o tom, jak vám může pomoci umístit položky na vaši stránku pomocí CSS. Můžete použít další pojmenovanou vlastnost CSS k určení, kde se vaše položka na stránce nachází. Toto spolu s funkcí zobrazení vám poskytne více podrobností o poloze vaší položky.

Funkce určování polohy je trochu matoucí než funkce zobrazení. Nebojte se, nejste jediný, kdo neví, co každá pozice udělá pro vaši položku. Doufám, že tento příspěvek pomůže objasnit tyto nejasné oblasti.

Položky mohou být obvykle umístěny na stránku, někdy s horními, dolními, levými a pravými hodnotami vzhledem k samotné stránce. Funkce určování polohy však určuje, kde jsou na stránce umístěny. Existuje několik funkcí určování polohy:

  • Statický: Výchozí stav pro každou položku. Neexistuje žádná určená pozice a položka se za normálních okolností vznáší na stránce. Pokud chcete zrušit přednastavenou pozici, nemusíte určovat hodnotu této pozice. Například, pokud váš web má výchozí pozice.
  • Relativní: Relativně umístěné položky mohou mít polohu, pokud jsou k dispozici další funkce: horní, dolní, levá a pravá. Další funkce posune položku mimo normální. Při použití této pozice nejsou vytvořeny žádné mezery. Na této pozici můžete také použít vlastnost z-index. Ve výchozím nastavení (hodnota: automatická) se položka zobrazí nad jakýmkoli jiným statickým prvkem.

* Poznámka: Vlastnost z-index můžete použít pouze ve vložených prvcích. Tato funkce nefunguje u staticky umístěných položek. Z-index řídí pořadí vašich položek. Hodnotu z-index můžete změnit tak, aby řídila vzhled sady položek. Horní index z umístí položku v pořadí podle spodní vrstvy a obráceně.

  • Oprava: Absolutně umístěná položka je umístěna vzhledem k oknu výřezu / prohlížeče a zůstává stejná i při rolování. Pokud použijete tuto polohu a jsou stejně flexibilní jako váš displej, absolutní umístění funguje ve flexibilních kontejnerech. Absolutní umístění však vede ke konfliktům s odolnými dětmi (ohýbací nádobí).
  • Absolutní: Absolutní prvek je umístěn vzhledem k nejbližšímu předku (rodičovský / kontejnerový prvek). Pokud předek není prvkem, je prvek umístěn proti tělu dokumentu. Na rozdíl od absolutní a pevné polohy se položka při otočení pohybuje na stránce. Definováním absolutního umístění je prvek vyloučen z toku dalších prvků v dokumentu. Tato absolutně vložená položka neovlivní jiné prvky na vaší stránce a naopak.
  • Float: Používá se k omotání textu kolem fotografií a umístění více na levé nebo pravé straně stránky.
  • Přesně: Přesune plovoucí prvky doleva nebo doprava nebo obojí, aby se obsah snížil a obsah se objevil za plovoucím prvkem. Plovoucí prvek můžete také přesunout na inline-start nebo inline-end.

Vizuálně zkontrolujte rozdíly mezi funkcemi vizuálního rozvržení a jedná se o podrobnější dokument o umístění CSS.