—»     —»   Базовое руководство для новичков по абсолютному позиционированию в CSS
  Раздел: CSS/Style Sheets   Комментариев: 3  

Базовое руководство для новичков по абсолютному позиционированию в CSS

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

Среди преимуществ использования элементов с абсолютным позиционированием можно выделить:

* Возможность избежать некоторых багов в IE; очень хорошая кросс-браузерная поддержка
* Меньшая зависимость от плавающих элементов, которые могут вызывать проблемы
* Меньшая зависимость от полей, которые могут вызывать проблемы в старых версиях IE

Также следует отметить и недостатки:

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

Основа синтаксиса

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

Для начала немного основного HTML:

<div class="box">

<div class="inner-box">
<p>dummy content</p>
</div>

</div>

Теперь код каскадных таблиц стилей (css):

.box {
position: relative;
}

.inner-box {
position: absolute;
top: 20px;
left: 50px;
}

(В данном примере мы опустили некоторые значения, которые нам не особо важны: значения ширины или/и высоты).

Для начала вам нужно создать что-то, что должно быть позиционировано. В данном случае мы будем позиционировать элемент .box. Мы делаем это, устанавливая элементу параметр position: relative.

Далее нам нужно абсолютно позиционировать внутренний элемент. Это можно сделать путем указания параметра position: absolute.

В завершение мы сообщаем браузеру, где конкретно нам нужно разместить внутренний элемент в соответствии с внешним элементом. Это реализуется за счет 4 возможных параметров: top, right, bottom и left. В данном примере мы используем два из них (этого достаточно). Внутренний элемент по умолчанию начинается в верхнем левом углу внешнего элемента, а затем размещается на 20 пикселей ниже от верхней части и на 50 пикселей правее от левой части.

Что происходит, если вы не позиционируете контент?

Абсолютное позиционирование не требует «относительного» элемента (как было в случае с элементом .box). Если вы абсолютно позиционируете элемент без позиционирования контента, то позиционирование будет происходить относительно всей страницы (за исключением случаев, когда указаны значения top, bottom, left или right. В тех случаях, если нет позиционированного контента, контент автоматически станет контейнером, и элемент не выбьется из потока).

Отсутствие позиционирования контента чаще всего является причиной проблем у людей, которые еще не близко знакомы с позиционированием в CSS. Новичок в CSS может решить установить позиционирование элемента на «absolute», а затем, после указания значений top и left, увидит, что элемент постоянно вытесняется в левую сторону или вверх, либо и туда и туда. И происходит это за пределами его контейнера. Это может отпугнуть новичка, и он навсегда заречется использовать данный параметр.

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

Дополнительно: масштабирование без применения параметров width и height

Давайте мы познакомим вас еще кое с чем. Вы можете определить размеры любого абсолютно позиционированного элемента, используя лишь значения top, left, bottom и right, без применения значений высоты height или ширины width в контенте.

Вот пример с использованием вышеприведенного кода HTML:

.box {  
position: relative;
width: 400px;
height: 400px;
}

.inner-box {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

Это приведет к тому, что внутренний элемент заполонит область контента внешнего элемента. Здесь у нас JSBin с немного увеличенными границами, и здесь вы сможете наблюдать работу техники:

* Демо

Базовое руководство для новичков по абсолютному позиционированию в CSS

Заключение

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

Вопросы?

Данная статья не претендует на лучшее руководство, поэтому, если у вас возникли какие-либо вопросы, не стесняйтесь задавать их посредством поля комментариев ниже.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Design FactoRy   Прочитано (раз): 6413   |   Оставлено комментариев: 3
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 9 февраля 2012 @ 19:26
Написал: Sana2020 — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Отличное базовое руководство,лучше и подробней честно я нигде не видел,но так как я новичек в етом деле,ета статья мне очень пригодится!
Комментарий #2: 10 февраля 2012 @ 06:55
Написал: YurgenDn — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Ошибки новичков заметны на "самопальных" сайтах, которые делают без шаблонов,сами. Сам осваивая каскадные листы стилей неоднократно "подрывался" - или height/width в контенте неправильно указывал или значения top/left там же.Все время что-то вылезало :))) Вот такие руководства начинающим лучше всегда под рукой держать.
Комментарий #3: 12 февраля 2012 @ 20:21
Написал: Арчи — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Спасибо за руководство , очень даже полезное
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц November по-русски
Подтверждение кода безопасности :

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


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031