—»     —»   Советы CSS: использование параметра абсолютного позиционирования
  Раздел: CSS/Style Sheets   Комментариев: 4  

Советы CSS: использование параметра абсолютного позиционирования

Позиционирование элементов – это один из самых важных аспектов относительно CCS. В нашей сегодняшней статье мы расскажем об использовании параметра «position» с помощью которого можно позиционировать элемент внутри страницы независимо от остального документа.

Конкретнее, мы собираемся применять значение «absolute», которое может быть применено к параметрам позиционирования графических элементов в разметке ваших проектов.

Какова задача параметра позиционирования?

Параметр «position» служит для определенного размещения элемента внутри веб-страницы, независимо от остального проекта.

Значение того, что вы только что прочитали

Понимание и применение параметра «position» не всегда ясно и понятно для всех. Для того, чтобы вы лучше понимали о чем идет речь, мы приготовили специальный пример с объяснением. Давайте ознакомимся с ним перед тем, как углубляться в подробности данного параметра.

Пример

Мы создадим страничку, на которой будет заголовок в верху, а также серый блок с текстом.

Вот такую разметку мы будем применять:

<h1>CSS: use of the property <em>position</em></h1>

<h2>Standard positioning of an element</h2>

<h3>Box containing a paragraph</h3>

<div class="box-1">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec imperdiet erat
        pharetra libero malesuada rhoncus.
    </p>
</div>

С которой мы свяжем следующий CSS для создания нашего блока с серым фоном:

.box-1 {width:300px;margin:10px;padding:10px;background:#d8d7d7;}

Посмотрите на страничку, которую мы только что сделали.

Советы CSS: использование параметра абсолютного позиционирования

Как видно, серый блок находится прямо под заголовками: это потому что код нашего блока был добавлен сразу после тэгов H1, H2 и H3.

Как перемещать элемент, не трогая при этом разметку HTML?

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

В нашем примере мы пробуем отобразить наш серый блок в самом начале страницы, в верхнем левом углу. Не трогая кода HTML, мы следующим образом добавляем нашему блоку параметр «position»:

...
.box-1 {width:300px; margin:10px; padding:10px; background:#d8d7d7; position:absolute; top:0; left:0;}
...

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

Советы CSS: использование параметра абсолютного позиционирования

Таким образом, посредством значения «absolute» в параметре «position», мы можем располагать элемент в любом месте страницы.

Что означает позиционирование в режиме absolute, и какие значения можно применять?

По умолчанию, установка значения параметра «position» стоит на режиме «static», который представляет собой обычное расположение всех элементов в разметке кода HTML.

Параметр «position» поддерживает следующие значения:

* static: как мы уже говорили – это значение по умолчанию, представляет собой обычное расположение всех элементов в разметке кода HTML;
* absolute: означает, что элемент может быть позиционирован в режиме абсолюта в сравнение с родительским элементом, у которого значение параметра не является «static». Элемент позиционируется в соответствии с координатами, вводящимися посредством параметров «top», «left», «right» и «bottom».
* relative: означает, что элемент должен быть позиционирован в относительном режиме, в сравнение с его нормальной позицией. Даже в этом случае он позиционируется в соответствии с координатами параметров «top», «left», «right» и «bottom».
* inherit: означает, что значение параметра «position» должно быть заимствованно у родительского элемента.

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

Будут ли какие-то дальнейшие разработки относительно абсолютного позиционирования?

В нашем втором примере мы видим, как с помощью абсолютного позиционирования, мы смогли расположить блок в верхнем левом углу. Этот параметр был указан за счет координат «top» и «left»:

...
.box-1 {width:300px; margin:10px; padding:10px; background:#d8d7d7; position:absolute; top:0; left:0;}
...

Т.е., установив туда 0, наш элемент будет расположен по координатам (0,0), в данном случае, относительно верха и левой стороны – получаем левый верхний угол.

Почему именно окно браузера берется за рабочую область?

Мы указали, что наш элемент позиционируется в режиме абсолюта по сравнению с первым родительским элементом, который имеет значение позиции отличное от «static». За неимением в нашем документе элемента со значением позиции отличным от «static», позиционирование производится относительно основного элемента HTML, чья рабочая область совпадает с окном браузера. Именно по этой причине, позиционирование выполняется относительно окна браузера.

Что если мы хотим позиционировать нашу таблицу относительно другого элемента?

Если мы хотим позиционировать наш блок относительно другого элемента, а не окна браузера, то достаточно лишь указать значение «static» параметру позиционирования «position» (естественно, тому элементу, относительно которого вы хотите производить позиционирование).

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

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

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

Советы CSS: использование параметра абсолютного позиционирования

На самом деле, в этой форме с комментариями всего один графический элемент: изображение стрелочки, которое указывает на аватар автора комментария. Все остальное – это просто серый фон (такой же, который был и в предыдущих примерах), а углы были закруглены посредством нового модуля CSS3 – border-radius.

Мы изменили тип позиционирования для этого блока, который по умолчанию был «static», на «relative». Так что, какой бы элемент не находился внутри блока с параметром position:absolute, он будет позиционироваться относительно данного блока, а не окна браузера.

Здесь был использован данный код CSS:

...
.box-1 {width:470px; margin:60px 10px 100px 50px; padding:20px; background:#d8d7d7; position:relative; -moz-border-radius:11px; -khtml-border-radius:11px; -webkit-border-radius:11px;}
...

И HTML:

<div class="box-1">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec imperdiet erat
        pharetra libero malesuada rhoncus.
    </p>
</div>

Ниже вы видите изображение того, что у нас получилось:

Советы CSS: использование параметра абсолютного позиционирования

Теперь мы без труда можем позиционировать стрелочку в режиме абсолюта, но относительно нашего блока: будет достаточно разместить ее внутри блока и присвоить ей параметр абсолютного позиционирования, а также задать ей значения «top» и «left» относительно самого блока.

Добавляем стрелку внутрь блока, путем добавления следующего кода HTML:

<img src="images/arrow.gif" class="arrow" alt=" " />

Как видно, мы присвоили изображению класс «arrow», который будет служить нам для установки позиционирования относительно блока. На данный момент, мы еще не внесли нужные изменения в наши таблицы стилей, пока что нам просто нужно обновить страницу и проверить – правильно ли мы добавили стрелочку – она должна быть внутри блока под текстом (так она расположена в нашем коде HTML):

Советы CSS: использование параметра абсолютного позиционирования

Теперь, вносим в наш CSS новый класс «img.arrow» для позиционирования стрелки в режиме абсолюта, предоставляя конкретные координаты расположения, посредством значений «top» и «left»:

...
img.arrow {position:absolute; top:30px; left:-22px;}
...

Теперь посмотрите на результат.

Советы CSS: использование параметра абсолютного позиционирования

Заключение

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

Ключевые тэги: CSS
Опубликовал Mysterious Master   Прочитано (раз): 12722   |   Оставлено комментариев: 4
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 1 июля 2010 @ 22:21
Написал: player — группа: Читатели  
На сайте с: 16.04.2010   |   Публикаций: 0   |   Комментариев: 35
ICQ: --- не указано ---
Спасибо за интересную статью.
Конечно наверстать страницу используя абсолютное и относительное позиционирования достаточно легко и быстро. Но тут я встретил несколько проблем: 1) при абсолютном позиционировании элементы страницы будут по-разному отображаться на экранах мониторовс разными диогоналями. Т.е. например на мониторе 17 дюймов элементы будут располагаться посередине, 19-левее, 21-ещё дальше, ну про широкоформатные моники вообще не говорю,,,
2) по относительному позиционированию беда с браузерами, точнее с самым любимым всеми версальщиками Internet Explore. Если взять например оперу, мазилу, гугл - эти браузеры практически одинаково отображают элементы, но IE губит всю картину.-элементы "убегают" на 5, 6 пикселов, а иногда это всё и портит.
Комментарий #2: 1 июля 2010 @ 23:27
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3324   |   Комментариев: 500
ICQ: --- не указано ---
Цитата: player
1) при абсолютном позиционировании элементы страницы будут по-разному отображаться на экранах мониторовс разными диогоналями.

Это вы имеете в виду, если делать "резиновый дизайн"?
Если дизайн делается фиксированным (1024, 1280 и т.п.) то ничего плавать не должно.
Цитата: player
беда с браузерами, точнее с самым любимым всеми версальщиками Internet Explore

Это вечный ахтунг lol Можно пробовать специальными маркерами под ИЭ или целыми CSS-файлами ситуацию исправлять. Но вы наверное и сами об этом знаете ... что я вам рассказываю smile
Комментарий #3: 2 июля 2010 @ 17:12
Написал: player — группа: Читатели  
На сайте с: 16.04.2010   |   Публикаций: 0   |   Комментариев: 35
ICQ: --- не указано ---
wink
Комментарий #4: 10 февраля 2011 @ 21:32
Написал: Алексий — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
ваще фигня какая то
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

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

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


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







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