http://profiwm.ru/kods.php?id=2146
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– определяет центрирование блока.
CSS позиционирование элементов страницы