Jak określić pozycję elementu na stronie. Można to zrobić na kilka sposobów chociażby statycznie czy względem innego elementu, lub chcemy go w danym miejscu "przykleić" na stałe. Jak to zrobić?
Służy do tego właściwość position
która przyjmuje następujące wartości:
static
jest domyślną wartością, element nie ma określonej pozycji względem czegokolwiek.Ona po prostu jest, nie robi nic szczególnego.
relative
taka wartość umożliwia nadanie elementowi nowej, relatywnej pozycji względem tej, którą posiada domyślnie jako 'static',
Służy ona do określenia pozycji elementu względem jego standardowej pozycji, czyli miejsca, w którym element by się znalazł, gdybyśmy nie określili pozycji.
absolute
to pozycja absolutna elementu względem elementu nadrzędnego, który ma wartość pozycji inną niż 'static'.W najprostszym przypadku określenie pozycji odbywa się względem dokumentu strony,
fixed
jest dokładną pozycją elementu HTML względem całego okna przeglądarki.
Aby użyć tej pozycji, należy wykorzystać właściwośćpositionz wartościąabsolute.
W powyższym przykładzie zostały użyte właściwości:top(góra),left(lewo). Służą one temu aby ustalić miejsce, w którym chcemy mieć dany element. Jak się być może domyślasz istnieją równieżright(prawo) orazbottom(dół). Każda z tych czterech właściwości określa odległość pomiędzy daną krawędzią, a jej odpowiednikiem w elemencie nadrzędnym.
W przypadku użyciatop: 20px;określamy odstęp między krawędzią górną elementu a krawędzią górną okna na20pikseli. Jeśli chcemy mieć element w lewym górnym rogu to należy użyćtop: 0px; left: 0px;jeśli w prawym dolnymright: 0px; bottom: 0px;.
relative
Kolejnym typem jest pozycja relatywna, aby jej użyć należy przekazaćrelativedo właściwości position. Służy ona do określenia pozycji elementu względem jego standardowej pozycji, czyli miejsca, w którym element by się znalazł, gdybyśmy nie określili pozycji.
Można dużo tłumaczyć, ale i tak najłatwiej będzie Ci to zrozumieć uruchamiając poniższy przykład. Zachęcam Cię również do zmiany typu pozycji oraz właściwości określających odległości.
| 1 2 3 4 5 6 7 8 910111213141516 | div{width:150px;height:45px;text-align:center;position:relative;}#div1{top:0px;left:0px;background-color:darkslategrey;}#div2{top:30px;right:70px;background-color:teal;} |
|---|---|
No dobrze, wiesz jak pozycjonować względem okna przeglądarki i względem standardowej pozycji elementu. A co jeśli chciałbyś względem elementu nadrzędnego?
Aby to zrobić należy użyć połączenia pozycji absolutnej i relatywnej. Gdy jeden z przodków znacznika, którego pozycję określamy jako absolutną, ma pozycję relatywną, to pozycja danego elementu, jest określana właśnie względem jego przodka z pozycją relatywną, a nie względem okna przeglądarki.
Na pewno uruchomienie poniższego przykładu lepiej Ci zobrazuje takie działanie.
| 1 2 3 4 5 6 7 8 91011121314 | #outer{position:relative;width:200px;height:150px;background-color:darkred;}#inner{position:absolute;right:10px;top:10px;width:50px;height:25px;background-color:blue;} |
|---|---|
Teraz#innerz pozycją absolutną jest pozycjonowany względem#outer, które posiada pozycję relatywną.
fixed
Użycieposition: fixed;sprawia, że dany element jest zawsze w tym samym miejscu względem okna przeglądarki, niezależnie od przewijania strony. Do określenia dokładnego położenia służą oczywiścietop,bottom,rightileft.
| 1 2 3 4 5 6 7 8 9101112 | div.menu{position:fixed;left:0px;top:0px;height:100%;width:200px;background-color:#dfdfdf;}div~p{margin-left:200px;max-width:600px;} |
|---|---|
Najczęściej pozycja ta jest używana do tworzenia nawigacji na stronie, czy to poziomej, czy pionowej.
z-index
W tej lekcji widziałeś sytuację w której jedendivnachodził na inną treść i ją zasłaniał. Czasami w takich sytuacjach chcemy sami określić, jaka zawartość ma być na wierzchu, a która może zostać przysłonięta. Przychodzi nam z pomocą właściwośćz-index, która zmienia położenie naszego elementu na osiZ.
W poniższym przykładzie, dzięki określeniuz-indexna2dla elementu#div1, nie jest on przysłaniany przez#div2.
| 1 2 3 4 5 6 7 8 91011121314151617 | div{width:150px;height:45px;text-align:center;position:absolute;}#div1{top:0px;left:0px;background-color:darkslategrey;z-index:2;}#div2{top:30px;left:70px;background-color:teal;} |
|---|---|
Co ciekawe, jeśli chcesz, aby jeden element znajdował się pod innymi, to nie musisz zwiększaćz-indexdla pozostałych znaczników. Możesz przypisać ujemną wartość np.-1dla tego konkretnego elementu.
Zadanie 1
W tym zadaniu Twoim celem jest ustawienie elementu.block_1nad.block_2oraz ustawienie dla.block_1odsunięcia od lewej krawędzi rodzica o10pxi od górnej krawędzi o15px.
Podsumowanie
W tej lekcji zajęliśmy się tematem określania pozycji elementów na stronie. Miałeś okazję poznać pozycję statyczną, absolutną, relatywną oraz ustaloną (fixed). Zobaczyłeś w jaki sposób działa każda z nich, a także zapoznałeś się z właściwościąz-index, która pozwala nam określić pozycję elementu na osi Z.