Pozycjonowanie względne
W pozycjonowaniu względnym możemy przesuwać element względem pierwotnego położenia. Służą do tego właściwości left, right, top i bottom. Samo pozycjonowanie względne jest określane właściwością position: relative;. Poniżej przedstawiłem element pozycjonowany względnie w czerwonym obramowaniu. Dla większej jasności elementy pozycjonowane umieszczam w elemencie z szaro-niebieską ramką.
<div class="ramka">
<div class="border" id="relative1">Element w pierwotnym położeniu</div>
</div> |
#relative1
{
position: relative;
}
.border
{
margin: 15px;
border: 2px solid #b80400;
padding: 10px;
}
.ramka
{
width: 350px;
border: 1px solid #9999cc;
} |
Element w pierwotnym położeniu
<div class="ramka">
<div class="border" id="relative2">
Element z właściwością left: 40px; - odsunięty od lewej krawędzi pierwotnego położenia o 40 pikseli
</div>
</div> |
#relative2
{
position: relative;
left: 40px;
}
.border
{
margin: 15px;
border: 2px solid #b80400;
padding: 10px;
}
.ramka
{
width: 350px;
border: 1px solid #9999cc;
} |
Element z wÅ‚aÅ›ciwoÅ›ciÄ… left: 40px; – odsuniÄ™ty od lewej krawÄ™dzi pierwotnego poÅ‚ożenia o 40 pikseli
<div class="ramka">
<div class="border" id="relative3">
Element z właściwością right: 40px; - odsunięty od prawej krawędzi pierwotnego położenia o 40 pikseli
</div>
</div> |
#relative3
{
position: relative;
right: 40px;
}
.border
{
margin: 15px;
border: 2px solid #b80400;
padding: 10px;
}
.ramka
{
width: 350px;
border: 1px solid #9999cc;
} |
Element z wÅ‚aÅ›ciwoÅ›ciÄ… right: 40px; – odsuniÄ™ty od prawej krawÄ™dzi pierwotnego poÅ‚ożenia o 40 pikseli
<div class="ramka">
<div class="border" id="relative4">
Element z właściwością bottom: 10px; - odsunięty od dolnej krawędzi pierwotnego położenia o 10 pikseli
</div>
</div> |
#relative4
{
position: relative;
bottom: 10px;
}
.border
{
margin: 15px;
border: 2px solid #b80400;
padding: 10px;
}
.ramka
{
width: 350px;
border: 1px solid #9999cc;
} |
Element z wÅ‚aÅ›ciwoÅ›ciÄ… bottom: 10px; – odsuniÄ™ty od dolnej krawÄ™dzi pierwotnego poÅ‚ożenia o 10 pikseli
<div class="ramka">
<div class="border" id="relative5">
Element z właściwością top: 10px; - odsunięty od górnej krawędzi pierwotnego położenia o 10 pikseli
</div>
</div> |
#relative5
{
position: relative;
top: 10px;
}
.border
{
margin: 15px;
border: 2px solid #b80400;
padding: 10px;
}
.ramka
{
width: 350px;
border: 1px solid #9999cc;
} |
Element z wÅ‚aÅ›ciwoÅ›ciÄ… top: 10px; – odsuniÄ™ty od górnej krawÄ™dzi pierwotnego poÅ‚ożenia o 10 pikseli
<div class="ramka">
<div class="border" id="relative6">
Element z właściwościami left: 40px; i top: 15px - odsunięty od lewej krawędzi pierwotnego
położenia o 40 pikseli oraz od górnej krawędzi o 15 pikseli
</div>
</div> |
#relative6
{
position: relative;
left: 40px;
top: 15px;
}
.border
{
margin: 15px;
border: 2px solid #b80400;
padding: 10px;
}
.ramka
{
width: 350px;
border: 1px solid #9999cc;
} |
Element z wÅ‚aÅ›ciwoÅ›ciami left: 40px; i top: 15px – odsuniÄ™ty od lewej krawÄ™dzi pierwotnego poÅ‚ożenia o 40 pikseli oraz od górnej krawÄ™dzi o 15 pikseli
Zachęcam do pozostawieni swoich uwag i komentarzy poniżej.
Tagi: CSS, position, relative
Ten wpis został opublikowany poniedziałek, 20 Grudzień 2010 o 01:31 i jest zaszufladkowany do kategorii Darmowe artykuły, Sekrety Webmasterów. Możesz śledzić wszystkie odpowiedzi do tego wpisu poprzezkanał RSS 2.0.
Możesz dodać odpowiedź lub trackback ze swojej strony.