Урок №10. CSS. Относительное позиционирование.

Содержание урока:

Относительное позиционирование
Плавающие блоки
Фиксированные блоки

 


 

Относительное позиционирование

При относительном позиционировании блоков необходимо прописывать свойство position:relative для блока, который должен смещаться. Смещение происходит относительно блока в нормальном потоке, а не так как в абсолютном позиционировании – относительно родительского элемента.

Создадим три блока в документе:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

   <html>

     <head>

       <title>Позиционирование блоков</title>

       <link rel="stylesheet" type="text/css" href="style.css">

     </head>

     <body>

       <div id="number1">Блок 1</div>

       <div id="number2">Блок 2</div>

       <div id="number3">Блок 3</div>

     </body>

   </html>

 

В таблице стилей пропишем размер и границы всех трех блоков:

#number1,#number2,#number3{

  border:2px solid green;

  width:200px;

  height:70px;

}

 

Результат в браузере:

Пример свойства position:relative

 

Теперь сместим блок 2 относительно левой части окна на 60 пикселей, а относительно верхней части окна на 30 пикселей:

#number1,#number2,#number3{

  border:2px solid green;

  width:200px;

  height:70px;

}

#number2{

  position:relative;

  left:60px;

  top:30px;

}

 

Результат:

Пример свойства position:relative

 

Как видно, что Блок 2 сместился соответственно заданных координат, а блоки 1 и 3 остались на своих местах.

Приступим к плавающим блокам.

 


 

Плавающие блоки

Плавающий способ позиционирования очень распространённый. Без него невозможно создать «резиновый» сайт, да и очень редкий сайт обходится без этого свойства. Здесь нельзя задать точные координаты блоков, а как именно это делается, сейчас увидите.

Плавающий блок задается свойством float, именно это свойство определяет, куда будет двигаться блок.
Возможные значения:

    Left – блок прижат к левой стороне. Остальные элементы страницы обтекают его справа.

    Right – блок прижат к правой стороне. Остальные элементы страницы обтекают его слева.

    None – блок не перемещается.

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

   <html>

     <head>

       <title>Позиционирование блоков</title>

       <link rel="stylesheet" type="text/css" href="style.css">

     </head>

     <body>

       <div id="number1">Експерементальный блок</div>

       Просто какие-то символы на странице. Это может быть просто текст, ссылки, списки, картинки и т.д. 

     </body>

   </html>

 

Таблица стилей:

#number1{

  border:2px solid green;

  width:200px;

  height:70px;

}

 

Результат в браузере:

Пример свойства float

 

Давайте прижмем блок к левой стороне. В таком случае, в таблице стилей необходимо прописать свойство float:left:

#number1{

  border:2px solid green;

  width:200px;

  height:70px;

  float:left;

}

 

Результат в браузере:

Пример свойства float:left

 

А давайте прижмем к правому краю:

#number1{

  border:2px solid green;

  width:200px;

  height:70px;

  float:right;

}

 

Результат в браузере:

Пример свойства float:right

 

Но что будет, если на странице будет несколько блоков с разными значениями свойства float?

Давайте добавим еще один блок и посмотрим, что будет:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

   <html>

     <head>

       <title>Позиционирование блоков</title>

       <link rel="stylesheet" type="text/css" href="style.css">

     </head>

     <body>

       <div id="number1">Експерементальный блок</div>

       <div id="number2">Експерементальный блок блок №2</div>

       Просто какие-то символы на странице. Это может быть просто текст, ссылки, списки, картинки и т.д. 

     </body>

   </html>

 

Пусть все свойства блоков будут одинаковыми кроме свойства float:

#number1{

  border:2px solid green;

  width:200px;

  height:70px;

  float:left;

}

#number2{

  border:2px solid green;

  width:200px;

  height:70px;

  float:right;

}

 

Результат в браузере:

Пример свойства float

 

А что будет при одинаковом значении свойства float?

Смотрим:

#number1{

  border:2px solid green;

  width:200px;

  height:70px;

  float:left;

}

#number2{

  border:2px solid green;

  width:200px;

  height:70px;

  float:left;

}

 

Результат в браузере:

Пример свойства float

 

Как видно, второй блок прижимается к правому краю первого блока, а все элементы на странице обтекают их. Аналогично и при значении float:right.

Но что если вам нужно, что бы оба блока были размещены справа, да еще и друг под другом. Для таких случаев существует свойство clear. Данное свойство указывает для блока, в котором оно прописано, что он должен находиться ниже всех плавающих блоков.

Возможны значения свойства clear:

    Left – блок расположен ниже всех левосторонних блоков.

    Right – блок расположен ниже всех правосторонних блоков.

    Both – блок расположен ниже всех плавающий блоков.

    None – никаких изменений. Используется по умолчанию.

Зададим это свойство для второго блока:

#number1{

  border:2px solid green;

  width:200px;

  height:70px;

  float:left;

}

#number2{

  border:2px solid green;

  width:200px;

  height:70px;

  float:left;

  clear:left;

}

 

Результат в браузере:

 

 

Пример свойства clear

 

В предыдущем уроке мы с вами сделали первую пробную страницу с помощью абсолютного позиционирования. Давайте попробуем создать такую же страничку, только с помощью плавающих блоков.

Код в html-документе:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

   <html>

     <head>

       <title>Позиционирование блоков</title>

       <link rel="stylesheet" type="text/css" href="style.css">

     </head>

     <body>

       <div id="head">шапка сайта</div>

       <div id="menu">меню</div>

       <div id="content">

       контент

       <div id="ad">блок с рекламой</div>

       </div>

       <div id="footer">подвал сайта</div>

     </body>

   </html>

 

В таблице стилей (style.css):

#head{

  background:silver;

  width:800px;

  height:120px;

}

#menu{

  background:gold;

  width:200px;

  height:250px;

}

#content{

  background:gold;

  width:550px;

  height:250px;

  left:200px;

  top:120px;

}

#footer{

  background:silver;

  width:800px;

  height:35px;

}

 

Сейчас мы просто задали для каждого из блоков размер и фон. Наши блоки позиционируют в нормальном потоке, но нам необходимо сделать плавающие блоки, что бы страничка приобрела привычную форму. Придадим блокам меню и контент свойства float:left, а блок с рекламой необходимо прижать к правой стороне, в таком случае используем свойство float:right:

#head{

  background:silver;

  width:800px;

  height:120px;

}

#menu{

  background:gold;

  width:200px;

  height:250px;

  float:left;

}

#content{

  background:gold;

  width:550px;

  height:250px;

  left:200px;

  top:120px;

  float:left;

}

#footer{

  background:silver;

  width:800px;

  height:35px;

  clear:both;

}

#ad{

  background:red;

  width:150px;

  height:220px;

  float:right;

}

 

Результат в браузере:

Позиционирование блоков

 

Видно как некрасиво блок с рекламой прижимается вплотную, добавим поля, чтобы избежать этого:

#ad{

  background:red;

  width:150px;

  height:220px;

  float:right;

  margin:15px;

}

 

Ну, теперь точно все хорошо.

Результат в браузере:

Позиционирование блоков

 

Вот и мы сверстали первую страничку без сложных расчётов по координатам.

 


 

Фиксированные блоки

Как вы уже знаете, данные блоки фиксируются относительно области просмотра, то есть при прокрутке страницы блок остается на месте.

Просто оставлю для Вас тут синтаксис, что бы Вы посмотрели и попробовали сами:

#blok{

  position:fixed;

  left:0px;

  top:0px;

}

 

На этом пока все. До встречи на следующем уроке!

 


 

Закрыть меню