-Приложения

  • Перейти к приложению Открытки ОткрыткиПерерожденный каталог открыток на все случаи жизни
  • Перейти к приложению Я - фотограф Я - фотографПлагин для публикации фотографий в дневнике пользователя. Минимальные системные требования: Internet Explorer 6, Fire Fox 1.5, Opera 9.5, Safari 3.1.1 со включенным JavaScript. Возможно это будет рабо
  • Все на карте

 -Поиск по дневнику

Поиск сообщений в Net-man

 -Подписка по e-mail

 

 -Статистика

Статистика LiveInternet.ru: показано количество хитов и посетителей
Создан: 20.04.2010
Записей: 814
Комментариев: 5985
Написано: 11575


CSS: Урок 21. CSS позиционирование элементов

Среда, 29 Декабря 2010 г. 20:45 + в цитатник

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>

Результат: перед позиционированием

Применим относительное CSS позиционирование:

<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 позиционирование

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

  • position:relative – определяет относительное CSS позиционирование.
  • left – определяет перемещение объекта позиционирования слева направо.
  • top – определяет перемещение объекта позиционирования сверху вниз.
  • bottom – определяет перемещение объекта позиционирования снизу вверх.
  • right – определяет перемещение объекта позиционирования справа налево.

Относительное CSS позиционирование – процесс перемещения объектов относительно своего первоначального положения внутри web-страницы.

Расположим объекты внутри блока:

<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 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; 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 class="square1">1</div>
<div class="square2">2</div>
<img src="../images/image_p.png" alt="" />
</body>

Результат: относительное 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}
.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.

Абсолютное 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 class="square1">1</div>
<div class="square2">2</div>
<img src="../images/image_p.png" alt="" />
</body>

Результат: абсолютное CSS позиционирование

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

  • position:absolute – определяет абсолютное CSS позиционирование элементов web-страницы, при котором значения атрибутов top, right, bottom, left откладываются от границ окна браузера.
  • margin:0 auto – определяет центрирование блока.
ab-w.net
Рубрики:  Полезное
Уроки CSS
Метки:  

Процитировано 1 раз

 

Добавить комментарий:
Текст комментария: смайлики

Проверка орфографии: (найти ошибки)

Прикрепить картинку:

 Переводить URL в ссылку
 Подписаться на комментарии
 Подписать картинку