Indeks elementu HTML
- Data publikacji
- Ostatnio edytowano
W poprzedniej części kursu CSS dowiedzieliśmy się o pozycjach w jakich może być wyświetlony element HTML. Domyślnie jest on wyświetlony w pozycji statycznej, jednak możemy to zmienić za pomocą właściwości position. Gdy element HTML stanie się elementem wyświetlonym w pozycji relatywnej, absolutnej lub ustalonej to pozycję takiego elementu HTML możemy kontrolować za pomocą właściwości: top, right, bottom, left.
Co się stanie, gdy zmienimy pozycję kilku elementów HTML i będą one znajdowały się jeden na drugim? Który z nich zobaczymy jako pierwszy?
Na te pytania odpowie nam ta część kursu CSS.
Na początek dodamy kilka przykładowych elementów HTML do części body dokumentu HTML.
<body>
<div id="rodzic">
<div id="pierwszy">pierwsze dziecko elementu - #rodzic</div>
<div id="drugi">drugie dziecko elementu - #rodzic</div>
<div id="trzeci">trzecie dziecko elementu - #rodzic</div>
</div>
</body>Rezultat:
Naszym oczom ukazały się cztery elementy div. Pierwszy z nich jest rodzicem pozostałych trzech elementów div. Za pomocą właściwości left oraz bottom sprawimy, aby elementy te znalazły się jeden na drugim.
Z poprzedniej części kursu CSS wiemy, że aby właściwość left oraz bottom oddziaływały na element HTML, to musi być on wyświetlony w pozycji relatywnej (relative), absolutnej (absolute) lub ustalonej (fixed).
#pierwszy {
position:relative;
}
#drugi {
position:relative;
left:20px;
bottom:40px;
}
#trzeci {
position:relative;
left:40px;
bottom:80px;
}Rezultat:
Od tej pory elementy dzieci przesłaniają siebie nawzajem. Domyślnie najbardziej dla nas widocznym elementem HTML będzie ten element dziecko, który został umieszczony jako ostatni w kodzie HTML (w swoim rodzicu).
<body>
<div id="rodzic"> <!-- element rodzic -->
<div id="pierwszy">pierwsze dziecko elementu - #rodzic</div>
<div id="drugi">drugie dziecko elementu - #rodzic</div>
<div id="trzeci">trzecie dziecko elementu - #rodzic</div> <!-- ten element będzie dla nas najbardziej widoczny, ponieważ jest on ostatnim dzieckiem swojego rodzica -->
</div>
</body>
Domyślną kolejność z jaką widzimy przesłaniające się elementy HTML, wyświetlone w pozycji relatywnej, absolutnej lub ustalonej, możemy kontrolować za pomocą właściwości z-index. Im wyższą ustalimy wartość właściwości z-index dla danego elementu HTML tym bardziej ten element będzie dla nas widoczny, w przypadku gdy inne elementy HTML będą go przesłaniać.
Odwrócimy kolejność z jaką widzimy poszczególne elementy dzieci:
#pierwszy {
position:relative;
z-index:3;
}
#drugi {
position:relative;
left:20px;
bottom:40px;
z-index:2;
}
#trzeci {
position:relative;
left:40px;
bottom:80px;
z-index:1;
}Rezultat:
Od tej pory najbardziej widocznym dla nas elementem HTML w naszym przykładzie jest element z właściwością z-index oraz wartością 3, ponieważ pozostałe elementy HTML posiadają niższy indeks, czyli niższą wartość właściwości z-index.
Kod HTML ostatniego przykładu znajduje się poniżej:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
div {
text-align:center;
padding:30px;
border:2px dashed black;
background-color:white;
box-shadow:4px 4px 4px black;
}
#pierwszy {
position:relative;
z-index:3;
background-color:lightblue;
}
#drugi {
position:relative;
left:20px;
bottom:40px;
z-index:2;
background-color:lightgreen;
}
#trzeci {
position:relative;
left:40px;
bottom:80px;
z-index:1;
background-color:gold;
}
</style>
</head>
<body>
<div id="rodzic">
<div id="pierwszy">element - div - z indeksem 3</div>
<div id="drugi">element - div - z indeksem 2</div>
<div id="trzeci">element - div - z indeksem 1</div>
</div>
</body>
</html>
W naszym przykładzie wszystkie elementy dzieci zostały wyświetlone w pozycji relatywnej, ponieważ została do nich dodana właściwość position wraz z wartością relative.
Dowiedzieliśmy się wcześniej, że domyślnie, gdy kilka elementów dzieci znajdzie się jeden na drugim, to najbardziej widocznym dla nas elementem HTML będzie ten, który został umieszczony w kodzie HTML jako ostatni element swojego rodzica, jednak ta zasada obowiązuje tylko w przypadku gdy ostatni element jest wyświetlony w pozycji innej niż domyślna pozycja statyczna. Inaczej mówiąc, elementy wyświetlone w pozycji relatywnej, absolutnej lub ustalonej mają "przewagę" nad elementami wyświetlonymi w domyślnej, statycznej pozycji. Po prostu są one bardziej widoczne niż elementy wyświetlone w pozycji statycznej.
Przykład, który znajduje się poniżej, nieco bardziej wyjaśni nam tą zależność.
Kod HTML przykładu znajduje się poniżej:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
div {
text-align:center;
padding:30px;
border:2px dashed black;
background-color:white;
box-shadow:4px 4px 4px black;
}
#pierwszy {
background-color:lightblue;
}
#drugi {
position:relative;
left:20px;
bottom:40px;
background-color:tomato;
}
#trzeci {
background-color:gold;
}
</style>
</head>
<body>
<div id="rodzic">
<div id="pierwszy">pierwszy element - div - pozycja statyczna</div>
<div id="drugi">drugi element - div - pozycja relatywna</div>
<div id="trzeci">trzeci element - div - pozycja statyczna</div>
</div>
</body>
</html>
Teraz zajmiemy się nieco innym układem elementów HTML, a mianowicie przyjrzymy się, które elementy HTML są dla nas bardziej widoczne w relacji przodek oraz potomek.
W poprzedniej części kursu CSS dowiedzieliśmy się, że elementy HTML, które są umieszczone jeden w drugim, w kodzie HTML, tworzą coś na wzór stosu, gdy zostaną wyświetlone w oknie przeglądarki internetowej. Domyślnie w takiej sytuacji najbardziej widocznym dla nas elementem HTML danego elementu #rodzic będzie ten element HTML, który jest jego ostatnim potomkiem.
<body>
<div id="rodzic">element - #rodzic
<div id="potomek1">pierwszy potomek elementu - #rodzic
<div id="potomek2">drugi potomek elementu - #rodzic
<div id="ostatni_potomek">ostatni potomek elementu - #rodzic</div>
</div>
</div>
</div>
</body>Rezultat:
Nasz dotychczasowy przykład prezentuje elementy div, które tworzą hierarchię typu przodek oraz potomek, czyli kilka elementów HTML, które są umieszczone jeden w drugim. Jedyne co możemy zrobić w takim wypadku, za pomocą właściwości z-index, to sprawić, aby dany element HTML został wyświetlony pod określonymi elementami HTML. Aby tego dokonać musimy spełnić trzy warunki.
Do elementu HTML, który ma zmienić swoją kolejność widoczności, należy dodać właściwość z-index wraz z ujemną wartością, np. -1.
Musimy określić element HTML, do którego element z właściwością z-index:-1; ma zostać przesunięty. Dodajemy do takiego elementu właściwość z-index, lecz tym razem z dodatnią wartością, np. 1.
Oba elementy muszą być wyświetlone w pozycji innej niż statyczna pozycja, np. w pozycji relatywnej, co uzyskamy dzięki właściwości position oraz wartości relative.
#rodzic {
position:relative;
z-index:1;
background-color:gold;
}
#ostatni_potomek {
position:relative;
z-index:-1;
left:110px;
top:110px;
background-color:tomato;
}Rezultat:
Tak o to ostatni potomek oraz jego cała zawartość została umieszczona pod innymi elementami HTML, lecz nie pod elementem z właściwością z-index:1;
Kod HTML ostatniego przykładu został umieszczony poniżej:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
div {
text-align:center;
padding:30px;
border:2px dashed black;
background-color:white;
box-shadow:4px 4px 4px black;
}
#rodzic {
position:relative;
z-index:1;
background-color:gold;
}
#potomek1 {
background-color:lightblue;
}
#potomek2 {
background-color:lightgreen;
}
#ostatni_potomek {
position:relative;
z-index:-1;
top:110px;
left:110px;
background-color:tomato;
}
</style>
</head>
<body>
<div id="rodzic">element - #rodzic
<div id="potomek1">pierwszy potomek elementu - #rodzic
<div id="potomek2">drugi potomek elementu - #rodzic
<div id="ostatni_potomek">ostatni potomek elementu - #rodzic</div>
</div>
</div>
</div>
</body>
</html>W następnej części kursu CSS zapoznamy się ze sposobami tworzenia cieni w tekście oraz w elemencie HTML.