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
Vyhledávání
Základy
Reference
Vlastnosti
CSS vlastnosti abecedně
- backgroud-position backgroundbackground-attachementbackground-colorbackground-imagebackground-repeatborderborder-bottomborder-bottom-colorborder-bottom-styleborder-bottom-widthborder-colorborder-leftborder-left-colorborder-left-styleborder-left-widthborder-rightborder-right-colorborder-right-styleborder-right-widthborder-styleborder-topborder-top-colorborder-top-styleborder-top-widthborder-widthbottomheightline-heightmarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmin-heightmin-widthpaddingpadding-bottompadding-leftpadding-rightpadding-topwidth
Poradna
Pokud si nevíte rady, chcete kontakt na spolehlivého tvůrce webu, či vás zajímá cizí názor, ozvěte se.