Pozycjonowanie w połączeniu ze sposobem wyświetlania obiektów, stanowi potężne narzędzie pozwalające praktycznie dowolnie "układać" obiekty na stronie oraz stosować technikę warstw. Pozycjonowanie jest realizowane za pomocą właściwości position oraz kliku cech które są odległościami krawędzi obiektu od krawędzi okna przeglądarki lub obiektu nadrzędnego, przy czym jest to rozpatrywane we współrzędnych ekranowych. Te cechy to:
-
left - odległość do lewej krawędzi obiektu,
-
top - odległość do górnej krawędzi obiektu,
-
right - odległość do prawej krawędzi obiektu,
-
bottom - odległość do dolnej krawędzi obiektu.
Właściwość position może przyjmować następujące wartości:
-
static - wartość przyjmowana jako domyślna,
-
relative,
-
absolute,
-
fixed,
-
inherit.
Właściwości związane z pozycjonowaniem i wymiarowaniem obiektów nie są dziedziczone.
Zastosowanie position:relative; position:absolute; lub position:fixed; powoduje, że obiekt staje się rodzicem zawierającym swoich potomków (jeżeli takich posiada). Mówi się często że obiekt jest wtedy kontenerem, pojemnikiem dla innych obiektów. Te pojęcia były już przez nas używane, teraz dowiedziałeś się, jakie wartości powinna posiadać właściwość position, aby tak było.
Pozycjonowanie statyczne - static
Jest to naturalne, domyślne położenie obiektu, wynikające z kolejności wystąpienia w dokumencie HTML, na które nie ma wpływu nawet podanie odległości od innych elementów. Deklarowanie wartości static służy praktyczne do "resetowania" wartości position.
Ćwiczenie 3_2_1_1
Wykonaj stronę pokazującą pozycjonowanie statyczne. Do wykonania zadania zastosuj następujący kod HTML:
<body>
<div class="div_1">
</div>
Ala ma kota
<div class="div_2">
</div>
</body>
Kod CSS w zewnętrznym aruszu stylów:
.div_1, .div_2
{
width:100px;
height:100px;
}
.div_1
{
left:50px;
top:100px;
background-color:black;
}
.div_2
{
left:100px;
top:200px;
background-color:red;
}
Tak powinna wyglądać wykonana strona:
-
width - szerokość, height - wysokość, background-color - kolor tła;
-
div_1, napis Ala ma kota oraz div_2 zostały kolejno umieszczone w dokumencie;
-
left oraz top nie miały wpływu na położenie div_1 i div_2 - wszystkie obiekty posiadają naturalne położenie, wynikające z kolejności wystąpienia w kodzie HTML.
Pozycjonowanie względne (relatywne) - relative
Obiekt tak jak w przypadku static zajmuje swoje naturalne położenie, przy czym zastosowanie niezerowych wartości top i left pozwala na wyświetlenie go w innym miejscu. Należy podkreślić, że obiekt pozostaje w tym samym miejscu, zmienia się tylko miejsce, w którym jest rysowany.
Należy postępować ostrożnie stosując position:relative; z niezerowym top lub left. Przez to, że obiekt będzie widoczny gdzie indziej, niż zajmuje miejsce, tworzy się tak naprawdę dwa różne układy strony, z czego jeden jest niewidoczny.
Zastosowanie position:relative; powoduje, że obiekt staje pojemnikiem dla innych obiektów.
Ćwiczenie 3_2_1_2
Wykonaj stronę pokazującą pozycjonowanie relatywne. Do wykonania zadania zastosuj następujący kod HTML:
<body>
<p>Akapit 1 - pozycjonowanie domyślne</p>
<p>Akapit 2 - pozycjonowanie domyślne</p>
<p style="position:relative; left:100px; top:50px;">Akapit 3 - pozycjonowanie relatywne</p>
</body>
Tak powinna wyglądać wykonana strona:
Obraz trzeciego akapitu (ale nie sam akapit, który pozostaje na swoim miejscu niewidoczny) został przesunięty w prawo o wartość left i w dół o wartość top. Dlatego w ramce pojawił się poziomy suwak, mimo iż tekst nie zajął całego wiersza.
Zobacz także ćwiczenie wykonane na wcześniejszych zajęciach. Umieszczenie jednego diva w drugim, było możliwe, po nadaniu właściwości position wartości relative.
Pozycjonowanie bezwzględne (absolutne) - absolute
Pozycja tak naprawdę nie jest absolutna, tylko jest ustalana względem obiektu zawierającego dany obiekt. Jeżeli tym obiektem jest body, wtedy dopiero można mówić o pozycjonowaniu absolutnym. Najczęściej używanie samego position:absolute; bez wspomagania się dodatkowym obiektem z position:relative; nie ma sensu, ponieważ wyliczenie pozycji elementu będzie trudne i może "rozjechać się", gdy zmieni się wielkość i pozycja innych elementów na stronie.
Obiekt pozycjonowany absolutnie wypada z normalnego przepływu dokumentu, gdzie elementy ustawiane są kolejno jeden po drugim. Obiekt taki, wrzucony do pojemnika - rodzica, zajmnie w nim miejsce bez względu na pozycję innych elementów. Może się nałożyć na inne elementy absolutne lub względne, które się tam znajdują. Z tych względów pozycjonowanie bezwględne służy do tworzenia warstw, którym poświęcimy oddzielne zajęcia.
Ćwiczenie 3_2_1_3
Wykonaj stronę pokazującą pozycjonowanie bezwzgędne. Do wykonania zadania zastosuj następujący kod HTML:
<body>
<p class="p_1">
Tekst pierwszego akapitu.
</p>
<p class="p_2">
Tekst drugiego akapitu.
</p>
</body>
Zastosuj kod CSS w zewnętrznym arkuszu stylów:
p.p_1, p.p_2
{
position:absolute;
}
p.p_1
{
left:50px;
top:10px;
border:2px solid green;
}
p.p_2
{
left:150px;
top:18px;
border:2px solid red;
}
Tak powinna wyglądać wykonana strona:
Jedna "mała" zmiana w kodzie CSS, a efekt zupełnie inny. Na tym przykładzie doskonale widać, że tworząc stronę trzeba być świadomym działania stylów.
Pozycjonowanie ustalone - fixed
Różni się od bezwględnego tym, że że pozycja elementu jest zawsze obliczana względem krawędzi okna przeglądarki. Dodatkowo element taki jest nieruchomy podczas przewijania strony, przez co jest on przez cały czas widoczny na ekranie, dokładnie w tym samym miejscu. Strony niniejszego opracowania posiadają strzałki odsyłające do strony poprzedniej lub następnej, które są pozycjonowane w ten właśnie sposób.
Ćwiczenie 3_2_1_4
Zmodyfikuj poprzednie ćwiczenie tak, aby pokazać pozycjonowanie ustalone. Do wykonania zadania zastosuj następujący kod HTML:
<body>
<p class="p_1">
Tekst pierwszego akapitu.
</p>
<p class="p_2">
Tekst drugiego akapitu.
</p>
<p class="p_1" style="top:2000px;">
Tekst trzeciego akapitu.
</p>
</body>
Zastosuj kod CSS w zewnętrznym arkuszu stylów:
p.p_1
{
left:50px;
top:10px;
border:2px solid green;
position:absolute;
}
p.p_2
{
left:150px;
top:18px;
border:2px solid red;
position:fixed;
}
Tak powinna wyglądać wykonana strona:
-
Akapity pierwszy i trzeci pozycjonowane są absolutnie, natomiast akapit drugi (z czerwonym obramowaniem) - fixed.
-
Podczas przewijania strony akapit drugi pozostaje w tym samym miejscu, nie przewija się razem z pozostałymi.
Wartość pozycjonowania - inherit
Z wartością inherit spotkamy się jeszcze wielokrotnie, ponieważ jest ona stosowana w wielu właściwościach. Mówi o tym, że dana cecha obiektu, ma przyjąć wartość tej samej cechy rodzica tego obiektu. Nie jest to wartość specyficzna dla pozycjonowania, ale dla wielu właściwości - najczęściej mówi się po prostu, że wartość inherit jest, albo jej nie ma.
Praca domowa
Wykonaj ponownie ćwiczenia z zajęć, stosując własne przykłady.