CSS: Pozice

Pozicování v CSS, absolute, relative, z-index a visibility

position:absolute

Nastaví pozici horního rohu objektu na pozici 0;0 pomocí parametrů letf a top nastavíme pozici od levého a horního okraje

position:absolute; left: xxx; top: xxx

style="position: absolute; left: 603px; top: 400px"

Takový prvek bude vzdálen 400px od horního okraje stránky a 603px od levého.

position:relative

Často se využívá u obrázků jsou-li odkazem, po najetí kurzoru se posunou dolů

position: relative; top: xxx; left: xxx

<style>A:hover{position: relative; top: 2px}</style>

z-index

Velká vychytávka, pomocí z-index můžete nastavit, aby se objekty překrývaly

z-index: hodnota

<span style="position: absolute;z-index: 1; color: red">
------
</span>
<span style="color: blue; border: 1px solid gray;background-color:black">
<strong>ahoj</strong>
</span>

0000000000000 ahoj

visibility

Slouží ke skrytí prvku

visibility: inherit| visible| hidden

Při nastavení hodnoty hidden bude prvek skryt.

overflow

V případě, že jsme nějakému objektu dali málo místa bube lépe nastavit, jak se má chovat, přetékat, rolovat, nebo si místo zvětšit

overflow: none | hidden | scroll | auto

clip

Slouží k oříznutí objektu, třeba když nechcete být na fotce. Je nutné přidat velikosti a absolutní polohu

clip: auto| rect(top right bottom left)

style="clip: rect(6px 70px 30px 3px); width: 200px, height: 100px ; position: absolute"

ořezaný text
můžete řezat i obrázky

Ořezaný text

Další: CSS v Internet Exploreru

Navigace