CSS Pozycjonowanie

CSS Pozycjonowanie

Pozycjonowanie pozwala na precyzyjne określenie miejsca, w którym dany obiekt ma być wyświetlany position:static; - domyślne	style.css: #section1 { width:200px; height:100px; background-color:red; position:static; /domyślne/ } #section2 { width:200px; height:100px; background-color:green; position:static; /domyślne/ }
position:relative; względem swojego normalnego położenia top, right, bottom, left - przesunięcie	style.css: #section1 { width:200px; height:100px; background-color:red; position:static; /domyślne/ } #section2 { width:200px; height:100px; background-color:green; position:relative; bottom:30px; left:30px; }
position:absolute; względem pierwszego elementu przodka, mającego inną metodę pozycjonowania niż static	<section id="section1"> <p>test</p> </section> style.css: #section1 { width:200px; height:100px; background-color:red; position:relative; top:10px; left:10px; } p { position:absolute; top:30px; right:30px; background-color:yellow; }
position:fixed; względem okna przeglądarki	style.css: #section1 { width:200px; height:100px; background-color:red; position:fixed; top:40px; left:20px; }
Kolejność elementów	<section id="section1"> </section> <section id="section2"> </section> <section id="section3"> </section> style.css: #section1 { width:200px; height:100px; background-color:red; position:fixed; top:40px; left:20px; } #section2 { width:200px; height:100px; background-color:green; position:fixed; top:60px; left:40px; } #section3 { width:200px; height:100px; background-color:blue; position:fixed; top:80px; left:60px; }
Kolejność elementów z-index:......;	style.css: #section1 { width:200px; height:100px; background-color:red; position:fixed; top:40px; left:20px; z-index:3; } #section2 { width:200px; height:100px; background-color:green; position:fixed; top:60px; left:40px; z-index:2; } #section3 { width:200px; height:100px; background-color:blue; position:fixed; top:80px; left:60px; z-index:1; }