Основные моменты в CSS позиционировании

Перед тем как рассматривать способы позиционирования хотелось бы напомнить, что такое блоки, которые мы собираемся позиционировать. Блоки это любые теги <div>,<p>,<span>,<ul>… и т.д. это и есть блоки или боксы кому как удобнее, главное чтобы вы понимали, о чем идет речь.

Итак давайте будем разбираться потихоньку, как что тут устроено. Существуют четыре способа позиционирования в языке CSS. Первый способ это (position: static) это способ по умолчанию т.е. выкладывание боксов как они есть

\

Объясню, все ваши блоки div будут выкладываться один за другим сверху вниз, этот способ так же известен как прямой поток. На практике он применяется очень часто и вы сами того не зная практически постоянно его используете.

Далее следующий вид позиционирования Absolut это абсолютное позиционирование

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

Синтаксис данного способа следующий:

#any {
position: absolute;
top: 0px; left: 5px; right: 5px; bottom: 0px;
}

top, left, right, bottom – это то с помощью чего мы задаем координаты положения этого бокса, т.е. отступы в пикселях от верха, слева, справа, снизу, не обязательно указывать все параметры достаточно даже одного. Эти отступы задаются от краев окна, но не всегда возможны так же отступы от краев другого блока… но об этом поговорим позже когда я буду объяснять принцип «Стакана».

Следующий вид позиционирования блоков это Relative

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

И последний вид позиционирования Fixed

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

Теперь перед тем как перейти к практике давайте поговорим о очень важном понятии как «Стакан». Важность его состоит в том что без понимания этого принципа вы не сможете грамотно воспользоваться возможностями позиционирования и многие моменты будут вам непонятны. И так в чем же собственно принцип, для наглядности я сделал схематический рисунок который даст вам возможность более наглядно это увидеть:

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

Главное тут помнить что блок static не создает эффект стакана и блоки внутри таких блоков будут выравниваться относительно окна, а как вы можете помнить любой блок <div>,<p>,<span>….и т.д., имеет по умолчанию статус static.

Это все теория а теперь давайте посмотрим как на практике будут действовать данные правила. Для наглядности сверстаем небольшой каркас простейшего сайта.

Итак мы имеем html каркас:

<div id="head">Эта шапка сайта
<div id="logo">Вот такой вот логотип</div>
<p>Вот еще пример блока это не div</p>
</div>
<div id="body">это тело сайта
<div id="menu">
<ul>
<li>Раздел 1</li>
<li>Раздел 2</li>
<li>Раздел 3</li>
</ul>
</div>
</div>
<div id="footer">Это подвал сайта</div>

И к нему css:

#head {
width: 600px;
background:#000066;
color: #FFFFFF;
height:200px;
position:relative;
}
#head p {
position: absolute; top: 70px; left: 200px;
}
#body {
width: 400px;
height:1000px;
background:#006600;
color:#FFFFFF;
}
#footer {
width: 600px;
height: 200px;
background:#FFFF00;
}
#menu {
position: FIXED; top: 210px; left:400px;
width: 200px;
background:#CC0000;
}
#logo {
position: absolute; top: 10px; right: 20px;
background:#FF00FF;
border: 1px solid #000000;
color:#000000;
font-size:16px;
width: 200px;
height:100px;
}

В итоге мы получаем следующее:

Теперь давайте разберем все по полочкам и так начнем с шапки:

#head {
width: 600px;
background:#000066;
color: #FFFFFF;
height:200px;
position:relative;
}

Здесь мы задали ширину 600 пикселей, цвет фона, цвет текста, высоту 200 пикселей, и применили позиционирование relative без отступов, это было сделано с целью реализации принципа стакана, чтобы этот блок стал не static и мы могли ориентировать объекты внутри него относительно стенок именно этого блока. Что мы собственно и сделали:

#logo {
position: absolute; top: 10px; right: 20px;
background:#FF00FF;
border: 1px solid #000000;
color:#000000;
font-size:16px;
width: 200px;
height:100px;
}
#head p {
position: absolute; top: 70px; left: 200px;
}

Применив абсолютное позиционирование и задав координаты относительно стенок этого блока. Для наглядности и большего понимания принципа работы вы можете сделать #head static и увидите разницу.

Далее у нас идет тело в нем я реализовал позиционирование FIXED:

#body {
width: 400px;
height:1000px;
background:#006600;
color:#FFFFFF;
}
#menu {
position: FIXED; top: 210px; left:400px;
width: 200px;
background:#CC0000;
}

т.е. сам #body у нас static я его просто раскрасил и задал размеры, а вот меню слева оно у нас имеет интересное значение fixed как и было описано в теории если мы будем просматривать страницу ниже (скроллить) то это меню будет так же перемещаться, хотя сам блок будет занимать то же место в потоке.

Ну и подвал:

#footer {
width: 600px;
height: 200px;
background:#FFFF00;
}

Здесь ничего хитрого обычный блок с заданными параметрами ширины, высоты и цвет фона.

Из данного примера наглядно видно насколько мощный инструмент верстки позиционирование, и умение его применять значительно расширит ваши возможности.

Я надеюсь данный урок будет вам понятен но если, что пишите, помогу.

Дата публикации:2011-08-08

Буду очень признателен, если вы поделитесь ссылкой на страницу со своими друзьями в социальных сетях.
Если у вас возникнут вопросы по теме пишите, надеюсь у вас все получиться, удачи вам и всего наилучшего!