Możesz określić sposób pozycjonowania obszaru lub elementu. Do tego celu służy właściwość position, która określa ostateczne położenie elementu. Razem jest cztery różne warianty pozycjonowania.
• static – nie jest wykonywane żadne specjalne pozycjonowanie, a zachodzi normalny przepływ tekstu.
• relative – zachodzi pozycjonowanie względne, które odnosi się do normalnej pozycji lub początkowej pozycji elementu.
• absolute – zachodzi absolutne pozycjonowanie za pomocą właściwości top, bottom, left i right. Elementy absolutne znajdują się poza normalnym przepływem tekstu. Pozycja absolutna jest obliczana względem krawędzi elementu rodzica (ale tylko jeśli nie ma on własności position: static).
• fixed – element jest pozycjonowany w sposób absolutny. Podczas przewijania element pozostaje na swoim miejscu.
Pierwsze dwa warianty pozwalają na zmienne pozycjonowanie. Elementy są pozycjonowane względnie do siebie. Poniższe dwa przykłady pokazują, jak mogłoby wyglądać takie pozycjonowanie:
• Element 2 jest przesunięty o 30 pikseli względem elementu 1.
• Element 2 jest umieszczony za elementem 1.
Inaczej jest z fixed i static. Za ich pomocą elementy można umieszczać w konkretnych miejscach. Ustawienia pozycjonowania odnoszą się do elementu nadrzędnego lub okna przeglądarki. Przykład:
• Element 1 jest dokładnie umieszczony 30 pikseli od prawego i 20 pikseli od górnego krawędzi przeglądarki.
Poniżej szczegółowo przedstawione zostaną różne warianty pozycjonowania. Jednak wcześniej ważne jest, aby wspomnieć o tzw. aliniowaniu, które ma istotne znaczenie przy pozycjonowaniu elementów. W następnym samouczku omówię ten ważny zasadniczy koncept CSS. W zasadzie chodzi o to, jak elementy na stronie internetowej przepływają w dokumencie. Elementy są wypychane tak daleko, jak to możliwe w danym kierunku. Dzięki pozycjonowaniu można jednoznacznie określić przepływ elementów.
Pozycjonowanie względne
Użycie pozycjonowanie względnego za pomocą position: relative powoduje dwie rzeczy:
• Kontener zostaje przesunięty z normalnego przepływu dokumentu.
• Początkowe miejsce elementu jest rezerwowane.
Dzięki rezerwacji początkowego miejsca inne elementy zachowują się tak, jakby element faktycznie nadal zajmował swoje miejsce.
Przykład:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
div {
width: 20%;
background-color: white;
padding: 10px;
border: 1px solid black;
margin: 5px;
}
#box {
position: relative;
top: 25px;
right: 25px;
background-color:#33CCFF;
}
</style>
</head>
<body>
<div id="box">Box 1</div>
<div>Box 2</div>
<div>Box 3</div>
</body>
</html>Zdefiniowano trzy kontenery.
Oba kontenery 2 i 3 nie otrzymały instrukcji pozycjonowania. Dlatego podążają za normalnym przepływem dokumentu. Natomiast kontener 1 został pozycjonowany względnie. Z tego powodu kontenery 2 i 3 są całkowicie niezależne od kontenera 1. Miejsce kontenera 1 nie jest zajęte przez te kontenery. Dzięki instrukcjom top, bottom, left i right następuje pozycjonowanie kontenerów. Przy pozycjonowaniu względnym zakłada się pierwotną pozycję w przepływie dokumentu.
• top: 25px – kontener jest przesunięty o 25 pikseli w dół. U góry kontenera zostaje dodane 25 pikseli.
• right: 25px – kontener jest przesunięty o 25 pikseli w lewo. Po prawej stronie kontenera dodano 25 pikseli.
Wartości pikseli są widziane względem pierwotnej pozycji. Określają one, gdzie wartość zostanie dodana, czyli góra i prawo. Ten aspekt jest kluczowy. Wskazania nie określają, gdzie kontener ma być przesunięty.
Pozycjonowanie absolutne
Kolejny rodzaj pozycjonowania to pozycjonowanie absolutne. Ta metoda pozycjonowania całkowicie usuwa element z przepływu. Inne elementy na stronie zachowują się tak, jakby element w ogóle nie istniał.
Przykład:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
div {
width: 20%;
background-color: white;
padding: 10px;
border: 1px solid black;
margin: 5px;
}
#box {
position: absolute;
top: 25px;
right: 25px;
background-color:#33CCFF;
}
</style>
</head>
<body>
<div id="box">Box 1</div>
<div>Box 2</div>
<div>Box 3</div>
</body>
</html>Tutaj również zdefiniowano trzy kontenery. Kontener 1 jest pozycjonowany absolutnie.
W przeciwieństwie do pozycjonowania względnego dla kontenera 1 nie ma zarezerwowanego miejsca. Kontenery 2 i 3 przesuwają się do góry.
Wskazania pozycjonowania top, right, bottom lub left nie odnoszą się już do oryginalnej pozycji kontenera w przepływie. Raczej odnoszą się one do najbliższego otaczającego elementu, który został pozycjonowany jako relative, absolute lub fixed. Jeśli nie ma otaczającego elementu, pozycjonowanie odbywa się względem najwyższego elementu w drzewie dokumentu czyli html.
Pozycjonowanie za pomocą fixed
Z position: fixed można ustawić elementy jako stałe. Oto przykład:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
p { margin-left: 25%; }
#fixiert {
position: fixed;
top: 20px;
left: 20px;
background-color:#33FFCC;
width: 20%;
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="fixiert">Efekt rozdzielacza Część 1</div>
<p>Jedynie przez krótki okres najnowszy samouczek lub szkolenie wideo w widoku online lub zawartość z kategorii pobierania jest bezpłatna w punktach. Dowiedz się więcej tutaj ...</p>
</body>
</html>Stałe pudełko nie przewija się, lecz zawsze pozostaje w swoim przypisanym miejscu.
Dla stałych pudełek otaczającym elementem zawsze jest okno przeglądarki.
Zachęcam, aby kierować uwagę na to, że w przypadku fixowania elementów w starszych przeglądarkach mogą występować znaczne problemy. Na przykład IE6 nie zachowuje się zgodnie z oczekiwaniami. Osoby, które chcą zoptymalizować swoje strony internetowe także dla tej przeglądarki, mają teraz dwie możliwości:
• Porzucić stałe pudełka.
• Korzystać z modyfikacji dla IE.
Jeśli chcesz użyć modyfikacji, zalecam odwiedzenie strony http://thestyleworks.de/tut-art/iewinfixed.shtml. Na tej stronie pokazane jest, jak za pomocą małego skryptu JavaScript można osiągnąć, że stałe pudełka działają także w tej przeglądarce.
