Postaram Ci się opisać troszkę, żeby Ci rozjaśnić w głowie i żeby Ci było łatwiej samemu sobie radzić z tego typu problemami.
Wyobraź sobie że każdy element na stronie np <div> </div>
, <p> </p>
, <ul> <li></li> </ul>
to pudełko (nie licząc obiektów z display: inline
, jak np <a></a>
). Pudełka mogą mieć różny rozmiar oraz margines. Teraz tak, jeżeli nie ustawisz im żadnego position
ani float
to te pudełka będą jedno pod drugim. Nie ważne ile masz dostępnego miejsca, bez znaczenia jest też rozmiar. Pod sobą i koniec.
Jeżeli ustawisz jednemu i/lub więcej elementom obok siebie float
(np float: left
albo float: right
) to wtedy nie będą pod sobą, tylko odpowiednio po prawej lub po lewej obok siebie w dostępnym miejscu (nadrzędne pudełko, nie całej strony).
Jeżeli ustawisz pudełku jakieś position
, to ten element tak jakby "wyjdzie" z tego szablonu i będziesz mógł go ustawić nad innymi elementami, albo w taki sposób by był po środku dwóch elementów, albo np żeby wychodził poza kontury swojego rodzica (nadrzędnego elementu) albo możesz go przyciąć (tu się przyda overflow
).
position: absolute
sprawi że pudełko będzie "na wierzchu" w górnym lewym rogu (na pozycji (0, 0) chyba że ustawisz inaczej z top
i left
). Kolejne pudełka nie będą poniżej niego (czyli górna krawędź następnego elementu nie będzie zaraz pod dolną krawędzią aktualnego elementu) ale będzie pod tym elementem (czyli np jak następnym będzie mniejszy, to ten pierwszy może go zakryć).
position: fixed
oznacza prawie to samo co absolute
, z tym że element nie rusza się jak scrollujesz.
Jak mówiłem wyżej, elementy bez ustawionego float
i position
są w stosunku do "rodzica" (elementu nadrzędnego). Tzn taki element nie może wyjść poza ramy rodzica.
Z position: fixed
lub position: absolute
sprawa ma się trochę inaczej. Te elementy są w stosunku do pierwszego elementu z position inną niż static
(idąc od elementu w górę) (każdy element ma domyślnie position: static
). Jeżeli nadałeś tylko jednemu elementowi position
, to ten element będzie w relacji do body
.
Tyle ode mnie, ale na przyszłość postaraj się korzystać z dostępnych źródeł. Jeżeli nie masz problemu z angielskim, strona http://www.w3schools.com/ jest dla Ciebie, jest tam cały dział poświęcony html'owi oraz sandbox w którym możesz pisać swój kod i od razu zobaczyć wynik ("Try it yourself", z tego co pamiętam). Jeżeli operujesz tylko polskim zainteresuj się http://www.kurshtml.edu.pl/