Pozycjonowanie
static- maksymalna szerokość
- automatyczna wysokość
- niezagnieżdżone jeden pod drugim
- zagnieżdżone - obszar zajmowany przez dziecko będzie leżał wewnątrz obszaru rodzica
relative
- left right top bottom działa względem punktu, w którym odbywałoby się pozycjonowanie statyczne
- element pozycjonowany względnie ma taki sam wpływ jak przy statycznym
absolute
- nie ma wpływu na pozostałe elementy, działa left right top bottom
- pozycjonowanie odbywa się względem lewego górnego rogu strony
fixed
- element pozostaje w miejscu ze scrollowaniem
Nie używamy position obok float!!!
Pozycjonowanie kontekstowe (względnie bezwzględne)
<div id="relative">
<div id="absolut"></div>
<div id="absolut2"></div>
</div>
<div id="absolut"></div>
<div id="absolut2"></div>
</div>
#relative{
width:200px;
height:200px;
position:relative;
background-color:yellow;
}
#absolut{
width:50px;
height:50px;
position:absolute;
background-color:green;
top::0px;
left:0px;
}
#absolut2{
width:50px;
height:50px;
position:absolute;
background-color:red;
top::150px;
left:150px;
}
width:200px;
height:200px;
position:relative;
background-color:yellow;
}
#absolut{
width:50px;
height:50px;
position:absolute;
background-color:green;
top::0px;
left:0px;
}
#absolut2{
width:50px;
height:50px;
position:absolute;
background-color:red;
top::150px;
left:150px;
}
Efekt
overflow - określa w jaki sposób i czy w ogóle będą nachodzić na siebie elementy na stronie