Относительное позиционирование (position:relative)

Здравствуйте уважаемые начинающие веб-мастера. Продолжаем тему позиционирования. В этой статье рассмотрим относительное позиционирование.

Пишется это свойство 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 принимает так же и отрицательные значения. Тогда чем больше отрицательное число, тем дальше будет расположен элемент.

И если их при этом сместить, и задать тень, то получается очень интересный эффект.

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) < < < В раздел > > > Фиксированное позиционирование

Запись опубликована в рубрике CSS основы. Добавьте в закладки постоянную ссылку.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *