• доступно о веб-разработке
31.10.2012 HTML, Технологии

Позиционирование

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

Итак, в силу своей природы элементы делятся на два типа — строчные и блоковые. Строчные, в основном, используются в тексте, а блоковые — для построения структуры сайта. Блок — кирпичик сайта.

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

Свойство блокового или строкового отображения по-умолчанию хранится в CSS того или иного объекта.

К примеру, <div> имеет параметр «display: block;». Если вы поставите два дива рядом — они будут на разных строчках. Потому что блок, также по умолчанию, простирается на 100% ширины экрана.

Какой-нибудь <b>, служащий просто для выделения текста внутри него жирным, имеет «display: inline;», поэтому он занимает ровно столько места, сколько текст внутри него.

Да, конечно, вы можете в своем CSS-файле прописать все наоборот, но смысла в этом нет. Потому как разработчики языка заранее подумали за вас.

Есть еще несколько типов CSS-свойства display, о которых вы узнаете по мере необходимости. Сменив значение свойства display на none, вы сделаете объект невидимым. Свернете его в точку, образно говоря. Есть еще один способ сделать его невидимым, но оставив физический размер (застолбить место) в сетке сайта — «visibility: hidden;».

Теперь о самом позиционировании (параметр position). Оно бывает нескольких типов:

  • relative — относительное
  • absolute  — абсолютное
  • static (по умолчанию) — статическое

Позиционирование работает относительно того элемента, в который вложен текущий.

К примеру у нас есть такой код:

<div>
 <span>
    Что-то там…
 </span>
</div>

Так вот <span> в данном случае позиционирует относительно <div>, поскольку он в него вложен.

Если мы решим, что хотим <span> в определенном месте страницы разместить, то укажем ему абсолютное позиционирование:

div span {
 position: absolute;
 top: 100px;
 left: 200px;
}

В данном случае статическое позиционирование игнорируется, и отсчет top и left ведется, соответственно, от левого и верхнего краев страницы.

Но если мы выставим:

div {
 position: relative;
}

Тогда внутренний элемент будет уже брать за точку отсчета первый внешний с относительной позицией.

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

Сделаю завтра ролик.

А пока рекомендую ознакомиться со следующим тематическим материалом:

http://ktonanovenkogo.ru/html/uroki-css/position-absolute-relative-fixed-pozicionirovaniya-html-css-left-right-top-bottom.html

Поделиться

Комментарии Правила дискуссии

Читайте ранее:
Списки / Неделя HTML

Уверен, что многие со мной согласятся в том, что если бы текст шел сплошной «простыней» без какого-то ни было различия,...

Закрыть