Váš web snadno a rychle

Pozicování bloků

Normální tok bloků je pod sebou. Pokud jej chceme změnit musíme provést pozicování bloků. Pozicování bloků můžeme provádět pomocí: 

  • Plovoucí bloky
  • Absolutní pozice
  • Relativní pozice
  • Fixní pozice

Plovoucí bloky

Vlastnost Hodnoty Význam Příklad
float left
right
none
Umístění bloku vlevo
Umstění bloku vpravo
Neplovoucí blok
float:left
clear left
right
both
none
Zákaz obtékání zleva
Zákaz obtékání zprava
Zákaz obtékání z obou stran
Povolené obtékání z obou stran
clear:both

Plovoucí bloky musí mít nastavenu šířku a musí být blokové (pokud nejsou defaultně blokové, tak je můžeme nastavit pomocí vlastností display:block)

Absolutní, relativní a fixní pozice

Vlastnost Hodnota Význam Příklad
position abolute
relative
static
fixed
absolutní umístění
relativní umístění
normální umístění
ani neroluje
position:absolute
left auto
délka
procento
bez posunutí
posunutí vpravo o délku
nebo o procento
left:auto
top auto
délka
procento
bez posunutí
posunutí vpravo o délku
nebo o procento
top:50px
right auto
délka
procento
bez posunutí
posunutí vpravo o délku
nebo o procento
right:50%
botom auto
délka
procento
bez posunutí
posunutí vpravo o délku
nebo o procento
bottom:80px
z-index auto
číslo
definice překrývání elementů
jakoby v ose z
z-index:3

 

  • Absolute - Pomocí souřadnic left a top nebo right a bottom určíme umístění bloku. Blok může překrýt jiný blok a k tomu slouží z-index abychom určili, zda má být blok pod nebo nad jiným blokem.
  • Relative - Pomocí relativních souřadnic (vzhledem k původní pozici) left a top nebo right a bottom určíme umístění bloku. Blok může překrýt jiný blok a k tomu slouží z-index abychom určili, zda má být blok pod nebo nad jiným blokem.
  • Static - Klasická pozice bloku.
  • Fixed -  Pomocí souřadnic left a top nebo right a bottom určíme umístění bloku. Blok může překrýt jiný blok a k tomu slouží z-index abychom určili, zda má být blok pod nebo nad jiným blokem. Blok je pořád na stejném místě, ani neroluje.

Vyhledávání

© 2013 Všechna práva vyhrazena.