Можете да определите типа позициониране за регион или елемент. За тази цел се използва свойството position. Това свойство показва как трябва да бъде позициониран елементът. Общо на разположение са четири различни варианта на позициониране.
• static – не се извършва специфично позициониране и се поддържа нормален текстов поток.
• relative – извършва се относително позициониране, което се ориентира към нормалната или началната позиция на елемента.
• absolute – извършва се абсолютно позициониране чрез свойствата top, bottom, left и right. Абсолютно позиционираните елементи се намират извън нормалния текстов поток. Абсолютната позиция се изчислява спрямо ръбовете на родителския елемент (но само ако той не притежава свойството position: static).
• fixed – елементът се позиционира абсолютно. При превъртане елементът остава на място.
Първите два варианта позволяват изменяемо позициониране. Тук елементите се позиционират един спрямо друг. Следващите два примера показват как може да изглежда този вид позициониране:
• Елемент 2 се позиционира 30 пиксела отместване спрямо елемент 1.
• Елемент 2 се позиционира зад елемент 1.
Друго е определено за fixed и static. Чрез тях елементите могат да се позиционират на конкретни места. Указанията за позициониране се отнасят към по-горещия елемент или прозореца на браузъра. Един пример:
• Елемент 1 се позиционира точно на 30 пиксела от дясния и 20 пиксела отгоре от позицията на прозореца на браузъра.
Следните различни варианти за позициониране ще бъдат представени още веднъж детайлно. Преди това, обаче, един съвет: В контекста на позиционирането на елементи, така нареченото плуване играе важна роля. Ще обясня този важен CSS принцип в подробности в следващото ръководство. В основни линии, целта на това плуване е как елементите на уебсайта да течат в документа. Елементите се натискат възможно най-далеч в съответната посока. Чрез този тип позициониране е възможно да се определи ясно потока на елемента.
Относителното позициониране
Чрез използването на относителното позициониране с position: relative се случват две неща:
• Кутията се измества от нормалния си поток.
• Оригиналното място на елемента се запазва.
Чрез запазването на оригиналното място другите елементи се държат така, сякакто когато елементът все още е на място.
Един пример:
<!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">Кутия 1</div>
<div>Кутия 2</div>
<div>Кутия 3</div>
</body>
</html>Три кутии са дефинирани тук.
Кутиите 2 и 3 не получават инструкции за позициониране. Затова те се движат по нормалния поток на документа. Кутия 1, от друга страна, е позиционирана относително. Поради това кутиите 2 и 3 са напълно непокътнати от Кутия 1. Тези кутии не претендират за място от Кутия 1. Чрез указанията top, bottom, left и right се извършва позиционирането на кутиите. При относителното позициониране се използва оригиналната позиция в документния поток (Flow).
• top: 25px – кутията се измества с 25 пиксела надолу. Горе на оригиналната позиция на кутията се вмъкват 25 пиксела.
• right: 25px – кутията се измества с 25 пиксела наляво. Дясната страна на оригиналната позиция на кутията се вмъква 25 пиксела.
Пикселните указания се виждат спрямо оригиналната позиция. Тези указания определят къде ще бъде вмъкнатата стойност, тоест отгоре и отдясно. Този аспект е от решаващо значение. Указанията следователно не определят къде ще бъде преместена кутията.
Абсолютното позициониране
Следва абсолютното позициониране. Този тип позициониране изтегля елемента напълно от потока. Другите елементи на страницата действат така, сякакто ако елементът изобщо не съществува.
Един пример:
<!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">Кутия 1</div>
<div>Кутия 2</div>
<div>Кутия 3</div>
</body>
</html>Тук са дефинирани три кутии. Кутия 1 е абсолютно позиционирана.
За разлика от относителното позициониране, за Кутия 1 няма запазено място. Кутиите 2 и 3 се плъзгат нагоре.
Указанията за позициониране top, right, bottom или left сега не са вече ориентирани към оригиналната позиция на кутията в потока. Те се отнасят до следващия най-близък елемент, който е позициониран с relative, absolute или fixed. Ако не съществува такъв елемент, позиционирането се извършва спрямо най-върховния елемент на дървото на документа, така че спрямо html.
Позициониране с fixed
С position: fixed може да закрепите елементите. Ето един пример:
<!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">Splitter-Effekt Teil 1</div>
<p>Nur für kurze Zeit ist das neueste Tutorial oder Video-Training in der Online-Ansicht oder der Inhalt aus der Download-Kategorie punktefrei. Erfahre hier mehr ...</p>
</body>
</html>Фиксираният блок няма да се плъзга, а ще остане винаги на зададената му позиция.
За фиксирани блокове околната среда винаги е прозореца на браузъра.
Моля, обърнете внимание, че има значителни проблеми, особено когато става дума за фиксиране на елементи в по-стари браузъри. Например, IE6 не върши това, което следва да върши. Тези, които искат/трябва да оптимизират уебсайтовете си и за този браузър, вече имат две възможности:
• Отказване от фиксирани блокове.
• Използване на хакове за IE.
Ако искате да използвате хак, ви препоръчвам страницата http://thestyleworks.de/tut-art/iewinfixed.shtml. Там се показва как с помощта на компактен JavaScript може да се постигне фиксиране на блокове и за този браузър.
