Современные CSS уроки

CSS позиционирование

Урок 23. CSS позиционирование элементов страницы

CSS атрибуты и значения, определяющие позицию блоков

CSS делает возможным процесс позиционирования. positionCSS атрибут, определяющий позиционирование элементов страницы. Его значения: 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>

Результат

Атрибуты и значения

Относительное 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>

Результат

Атрибуты и значения

Дата публикации: Октябрь 2009 | Обновление: Август 2014

Урок 22. CSS обтекание   CSS позиционирование   Урок 24. CSS верстка

    Сохранить в сервисы и закладки