Позиции CSS блока
CSS позиционирование
CSS позиционирование блока на странице
CSS атрибуты и значения, определяющие позицию блоков
CSS делает возможным процесс позиционирования. position – CSS атрибут, определяющий позиционирование элементов страницы. Его значения: relative и absolute определяют соответственно относительное позиционирование и абсолютное позиционирование.
Относительное CSS позиционирование
Для начала создадим следующие элементы:
<head>
<style type="text/css">
.square1 {border:1px solid #000000; background-color:GreenYellow; color:#000000; width:80px; height:80px}
.square2 {border:1px solid #000000; background-color:Yellow; color:#000000; width:80px; height:80px}
</style>
</head>
<body>
<div class="square1">1</div>
<div class="square2">2</div>
<img src="../images/image_p.png" alt="" />
</body>
|
Результат
Применим относительное позиционирование:
<head>
<style type="text/css">
.square1 {border:1px solid #000000; background-color:GreenYellow; color:#000000; width:80px; height:80px; position:relative; left:100px}
.square2 {border:1px solid #000000; background-color:Yellow; color:#000000; width:80px; height:80px; position:relative; left:250px}
img {position:relative; left:550px; top:100px}
</style>
</head>
<body>
<div class="square1">1</div>
<div class="square2">2</div>
<img src="../images/image_p.png" alt="" />
</body>
|
Результат
Атрибуты и значения
- relative – относительное позиционирование.
- left – перемещение объекта слева направо.
- top – перемещение объекта сверху вниз.
- bottom – перемещение объекта снизу вверх.
- right – перемещение объекта справа налево.
Относительное CSS позиционирование – процесс перемещения объектов относительно своего первоначального положения внутри страницы.
Расположим объекты внутри блока:
<head>
<style type="text/css">
#main_square {
width:500px;
height:500px;
background-color:Gray;
border:1px solid #000000;
padding:0;
margin:0 auto
}
.square1 {border:1px solid #000000; background-color:GreenYellow; color:#000000; width:80px; height:80px}
.square2 {border:1px solid #000000; background-color:Yellow; color:#000000; width:80px; height:80px}
</style>
</head>
<body>
<div id="main_square">
<div class="square1">1</div>
<div class="square2">2</div>
<img src="../images/image_p.png" alt="" />
</div>
</body>
|
Результат
Применим относительное CSS позиционирование:
<head>
<style type="text/css">
#main_square {
width:500px;
height:500px;
background-color:Gray;
border:1px solid #000000;
padding:0;
margin:0 auto
}
.square1 {border:1px solid #000000; background-color:GreenYellow; color:#000000; width:80px; height:80px; position:relative; left:50px; top:150px}
.square2 {border:1px solid #000000; background-color:Yellow; color:#000000; width:80px; height:80px; position:relative; left:150px}
img {position:relative; left:50px; bottom:150px}
</style>
</head>
<body>
<div id="main_square">
<div class="square1">1</div>
<div class="square2">2</div>
<img src="../images/image_p.png" alt="" />
</div>
</body>
|
Результат
Увеличим количество объектов позиционирования:
<html>
<head>
<style type="text/css">
#main_square {
width:500px;
height:500px;
background-color:Gray;
border:1px solid #000000;
padding:0;
margin:0 auto
}
.square1 {border:1px solid #000000; background-color:GreenYellow; color:#000000; width:80px; height:80px}
.square2 {border:1px solid #000000; background-color:Yellow; color:#000000; width:80px; height:80px}
.square3 {border:1px solid #000000; background-color:Red; color:#000000; width:80px; height:80px}
.square4 {border:1px solid #000000; background-color:DeepSkyBlue; color:#000000; width:80px; height:80px}
</style>
</head>
<body>
<div id="main_square">
<div class="square1">1</div>
<div class="square2">2</div>
<div class="square3">3</div>
<div class="square4">4</div>
<img src="../images/image_p.png" alt="" />
</div>
</body>
</html>
|
Результат
Применим относительное CSS позиционирование:
<html>
<head>
<style type="text/css">
#main_square {
width:500px;
height:500px;
background-color:Gray;
border:1px solid #000000;
padding:0;
margin:0 auto
}
.square1 {border:1px solid #000000; background-color:GreenYellow; color:#000000; width:80px; height:80px}
.square2 {border:1px solid #000000; background-color:Yellow; color:#000000; width:80px; height:80px; position:relative; left:418px; bottom:82px}
.square3 {border:1px solid #000000; background-color:Red; color:#000000; width:80px; height:80px; position:relative; top:254px}
.square4 {border:1px solid #000000; background-color:DeepSkyBlue; color:#000000; width:80px; height:80px; position:relative; left:418px; top:172px}
img {position:relative; left:209px; bottom:120px}
</style>
</head>
<body>
<div id="main_square">
<div class="square1">1</div>
<div class="square2">2</div>
<div class="square3">3</div>
<div class="square4">4</div>
<img src="../images/image_p.png" alt="" />
</div>
</body>
</html> |
Результат
Обратите внимание на то, сколько места занимает CSS код. Куда более рационально использовать внешний .css файл. Подробности в уроке включение CSS.
Абсолютное CSS позиционирование
Пример:
<head>
<style type="text/css">
#main_square {
width:500px;
height:500px;
background-color:Gray;
border:1px solid #000000;
padding:0;
margin:0 auto
}
.square1 {border:1px solid #000000; background-color:GreenYellow; color:#000000; width:80px; height:80px; position:absolute; left:50px; top:150px}
.square2 {border:1px solid #000000; background-color:Yellow; color:#000000; width:80px; height:80px; position:absolute; right:150px}
img {position:absolute; left:50px; bottom:150px}
</style>
</head>
<body>
<div id="main_square">
<div class="square1">1</div>
<div class="square2">2</div>
<img src="../images/image_p.png" alt="" />
</div>
</body>
|
Результат
Атрибуты и значения
- position:absolute – определяет абсолютное CSS позиционирование элементов web-страницы, при котором значения атрибутов top, right, bottom, left откладываются от границ окна браузера.
- margin:0 auto – определяет центрирование блока.
Автор проекта - Вася Митин | Дата публикации: Октябрь 2009 | Обновление: Ноябрь 2018
CSS позиции блока 
CSS позиционирование 
CSS позиция на сайте
