Možné hodnoty:
static | relative | absolute | fixed | inherit
static
- umístěn normálně v dokumentu
relative
- je relativně posunut ze své normální pozice o hodnoty specifikované vlastnostmi
left
,
top
,
right
a
bottom
absolute
- umístěn na souřadnicích
left
,
top
,
right
a
bottom
fixed
- jako
absolute
ale vzhledem k oknu (nemusí fungovat)
inherit
- dědí vlastnost od rodičů
Povolené hodnoty:
vzdálenost od hrany příslušného bloku
procenta - procentní poměr omezujícího bloku
auto - vypočítá sám
inherit - zdědí od rodičů
.relativne1 {position: relative; left: 50px} .relativne2 {position: relative; right: 20px; bottom: -100px} .absolutne {position: absolute; left: 600px; top: 150px} .fixne {position: fixed; left: 600px; top: 200px} <img src="skola1.jpg" alt="škola 1" width="250" height="188" class="relativne1"> <img src="skola2.jpg" alt="škola 2" width="250" height="188" class="relativne2"> <img src="skola_abs.jpg" alt="škola absolutně" width="250" height="188" class="absolutne"> <img src="skola_fix.jpg" alt="škola fixně" width="250" height="188" class="fixne">
.relativneindex1 {z-index: 2; position: relative; left: 50px} .relativneindex2 {z-index: 1; position: relative; right: 20px; bottom: -100px} <img src="skola1.jpg" alt="škola 1" width="250" height="188" class="relativneindex1"> <img src="skola2.jpg" alt="škola 2" width="250" height="188" class="relativneindex2">
<img src="skola1.jpg" alt="škola 1" width="250" height="188" class="index1" id="index1" onmouseover=zmenaIndex('index1')> <img src="skola2.jpg" alt="škola 2" width="250" height="188" class="index2" id="index2" onmouseover=zmenaIndex('index2')>
<script language="JavaScript" type="text/javascript"> <!-- function zmenaIndex(index) { if (index == "index1") { document.getElementById("index1").style.zIndex = "2"; document.getElementById("index2").style.zIndex = "1"; } else { document.getElementById("index1").style.zIndex = "1"; document.getElementById("index2").style.zIndex = "2"; } } --> </script>