Здравствуйте уважаемые начинающие веб-мастера. Продолжаем тему позиционирования. В этой статье рассмотрим относительное позиционирование.
Пишется это свойство CSS как psition:relative.
При его применении, элемент позиционируется относительно того места, на котором он находиться изначально.
То есть его можно подвинуть вверх-вниз и вправо-влево, и другие теги не смогут занять его начальное место.
Для перемещения используются свойства:
top: **px; — отступ сверху от изначального положения;
left: **px; — отступ слева;
right: **px; — отступ справа;
bottom: **px; — отступ снизу;
В значении допускается применять любые единицы длины применяемые в веб.
Само по себе такое позиционирование почти не отличается от свойства margin, и применяется довольно редко.
Совсем другое дело, если psition:relative. применять в тандеме с psition:absolute..
И вот тут открываются очень интересные возможности.
Первая и самая простая — это создать один материнский блок, и задав ему psition:relative, разместить в нём несколько дочерних блоков, позиционированных абсолютно.
Для примера создадим вот такую открытку (приметивненько конечно, но ведь только для примера):
Код:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Документ без названия</title>
<style>
.mom{ /*Открытка*/
position: relative; /*Позиционируем относительно*/
font-size: 30px; /*Размер заголовка*/
color: #ea3d28; /*Цвет заголовка*/
font-family: Monotype Corsiva; /*Шрифт заголовка*/
width: 450px; /*Ширина открытки*/
height: 230px; /*Высота открытки*/
text-align: center; /*Выравниваем заголовок по середине*/
padding-top: 50px; /*Выравниваем заголовок по центру*/
border: 10px ridge #77ff66; /*Рамка открытки*/
}
.dite1{ /*Букет*/
position:absolute; /*Позиционируем абсолютно*/
top: 25px; /*Отступ от верха открытки*/
left: 40px; /*Отсуп от левого края открытки*/
}
/*Позиционируем второй букет и два торта*/
.dite2{
position: absolute;
top: 185px;
left: 320px;
}
.dite3{
position: absolute;
top: 17px;
left: 340px;
}
.dite4{
position: absolute;
top: 170px;
left: 20px;
}
</style>
</head>
<body>
<div class="mom">
<h1>Поздравляю</h1>
<div class="dite1"><img src="images/s18.jpg"></div>
<div class="dite2"><img src="images/s19.jpg"></div>
<div class="dite3"><img src="images/s20.jpg"></div>
<div class="dite4"><img src="images/s21.jpg"></div>
</div>
</body>
</html>
По этому же принципу можно разбить страницу на несколько колонок или блоков, выровненных по верхнему краю.
Код:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Документ без названия</title>
<style>
.wrapper{
position: relative;
}
.bloc1, .bloc2, .bloc3{
position: absolute;
width: 200px;
}
.bloc1 {
background: #1e90ff;
left: 0;
}
.bloc2{
background: #7fc7ff;
left: 200px;
}
.bloc3{
background: #d5d5d5;
left: 400px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="bloc1">bloc 1</div>
<div class="bloc2">bloc 2</div>
<div class="bloc3">bloc 3</div>
</div>
</body>
</html>Ещё один интересный вариант применения psition:relative. в тандеме с psition:absolute — это возможность применить к блокам z-index.
Для тех кто не знает, поясню. Z-index позволяет размещать элементы друг над другом, то есть по оси z.
Если нескольким элементам задать это свойство, то выше, то есть как бы ближе к нам, будет находиться элемент, у которого значение больше.
Z-index принимает так же и отрицательные значения. Тогда чем больше отрицательное число, тем дальше будет расположен элемент.
И если их при этом сместить, и задать тень, то получается очень интересный эффект.
Код:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Документ без названия</title>
<style>
.wrapper{
position: relative;
}
.one, .two, .three, .four{
width: 200px;
height: 150px;
position: absolute;
border-radius: 5px;
box-shadow: -5px -5px 1px 3px #808080;
}
.one{
background: #d77d31;
top: 50px;
left: 50px;
z-index: 1;
}
.two{
background: #c45c1e;
top: 50px;
left: 150px;
z-index: 2;
}
.three{
background: #b7410e;
top: 100px;
left: 300px;
z-index: 4;
}
.four{
background: #c41e3a;
top: 150px;
left: 450px;
z-index: 8;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="one">
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
</div>
</div>
</body>
</html>Остаётся только заполнить эти блоки текстом и изображениями.
Желаю Вам творческих успехов.
Перемена
— Огурцов, — говорит учитель во время урока, — разбуди своего соседа.
— Почему я? Ведь это вы его усыпили?
Абсолютное позиционирование (position:absolute) < < < В раздел > > > Фиксированное позиционирование
