Pozycjonowanie fixed
Element w pierwotnym położeniu. Pozostaje w miejscu, w którym był po wczytaniu się strony.
Element dodatkowy
Ze względu na specyfikę pozycjonowania fixed pierwszy przykład umieściłem powyżej, tak by był widoczny od razu po załadowaniu strony w większości przeglądarek. Kod tego przykładu znajdziesz nieco niżej.
W pozycjonowaniu fixed określamy pozycje elementu względem krawędzi okna przeglądarki. Elementy występujące po elemencie pozycjonowanym zajmują miejsce tego elementu. Pozycje tradycyjnie ustala się właściwościami left, right, top i bottom. Pozycjonowanie fixed jest określane właściwością position: fixed;. Elementy pozycjonowane w ten sposób umieściłem w czerwonym obramowaniu. Dla większej jasności po elemencie pozycjonowanym umieściłem element dodatkowy (zielone tło), a całość umieszczam w elemencie z szaro-niebieską ramką.
<div class="ramka">
<div class="border" id="fixed1">Element w pierwotnym położeniu</div>
<div class="dodatkowy">Element dodatkowy</div>
</div> |
#fixed1
{
position: fixed;
}
.border
{
margin: 15px;
border: 2px solid #b80400;
padding: 10px;
background-color: #ffffff;
}
.ramka
{
width: 350px;
border: 1px solid #9999cc;
}
.dodatkowy
{
margin: 8px;
padding: 12px;
background-color: #33ff99;
color: #ffffff;
font-weight: bold;
} |
<div class="ramka">
<div class="border" id="fixed2">
Element z właściwościami top: 90px; right: 40px; - odsunięty od górnej i prawej krawędzi okna przeglądarki o 40 pikseli
</div>
<div class="dodatkowy">Element dodatkowy</div>
</div> |
#fixed2
{
position: fixed;
top: 90px;
right: 40px;
}
.border
{
margin: 15px;
border: 2px solid #b80400;
padding: 10px;
background-color: #ffffff;
}
.ramka
{
width: 350px;
border: 1px solid #9999cc;
}
.dodatkowy
{
margin: 8px;
padding: 12px;
background-color: #33ff99;
color: #ffffff;
font-weight: bold;
} |
Element z właściwościami top: 90px i right: 40px; – odsunięty od górnej 90 pikseli i prawej krawędzi okna przeglądarki o 40 pikseli
Element dodatkowy
Pozycjonowanie statyczne
Ostatnim typem pozycjonowania jest pozycjonowanie statyczne. Oznaczane jest właściwością position: static;. Jest to domyślne pozycjonowanie. Mają je wszystkie elementy na stronie, którym nie zmieniono właściwości position. Czasami zachodzi konieczność jawnego użycia pozycjonowania statycznego. Przyjrzyjmy się przykładowi poniżej. Jeden z bloków div jest pozycjonowany względnie (position: relative). Wstawiony do jego wnętrza kolejny blok div automatycznie ma tę samą właściwość.
<div class="ramka" id="relative">
<div class="border">
Element z właściwościami left: 40px; i top: -50px - pozycjonowany względnie.
<div class="border">
Element ma to samo pozycjonowanie, co element nadrzędny.
</div>
</div>
<div style="margin: 8px; padding: 12px; background-color: #33ff99; color: #ffffff; font-weight: bold;">
Element dodatkowy</div>
</div> |
#relative div
{
position: relative;
left: 40px;
top: -50px;
}
.border
{
margin: 15px;
border: 2px solid #b80400;
padding: 10px;
background-color: #ffffff;
}
.ramka
{
width: 350px;
border: 1px solid #9999cc;
}
.dodatkowy
{
margin: 8px;
padding: 12px;
background-color: #33ff99;
color: #ffffff;
font-weight: bold;
} |
Element z właściwościami left: 40px; i top: -50px – pozycjonowany względnie.
Element przejmuje pozycjonowanie elementu nadrzędnego.
Element dodatkowy
Jeżeli chcielibyśmy usunąć pozycjonowanie dla wewnętrznego bloku, musimy użyć position: static
<div class="ramka" id="relative">
<div class="border">
Element z właściwościami left: 40px; i top: -50px - pozycjonowany względnie.
<div class="border" id="static">
Element z usuniętym pozycjonowaniem dzięki właściwości <em>position: static</em>.
</div>
</div>
<div style="margin: 8px; padding: 12px; background-color: #33ff99; color: #ffffff; font-weight: bold;">
Element dodatkowy</div>
</div> |
#relative div
{
position: relative;
left: 40px;
top: -50px;
}
#static
{
position: static;
}
.border
{
margin: 15px;
border: 2px solid #b80400;
padding: 10px;
background-color: #ffffff;
}
.ramka
{
width: 350px;
border: 1px solid #9999cc;
}
.dodatkowy
{
margin: 8px;
padding: 12px;
background-color: #33ff99;
color: #ffffff;
font-weight: bold;
} |
Element z właściwościami left: 40px; i top: -50px – pozycjonowany względnie.
Element z usuniętym pozycjonowaniem dzięki właściwości position: static.
Element dodatkowy
Zachęcam do pozostawieni swoich uwag i komentarzy poniżej.
