Конкретнее, мы собираемся применять значение «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;}
Посмотрите на страничку, которую мы только что сделали.
Как видно, серый блок находится прямо под заголовками: это потому что код нашего блока был добавлен сразу после тэгов H1, H2 и H3.
Как перемещать элемент, не трогая при этом разметку HTML?
Теперь, несмотря на то, что относительно кода, наш блок находится прямо под заголовками, мы, посредством параметра «position», сделаем так, чтобы элемент можно было расположить в любой точке страницы.
В нашем примере мы пробуем отобразить наш серый блок в самом начале страницы, в верхнем левом углу. Не трогая кода HTML, мы следующим образом добавляем нашему блоку параметр «position»:
...
.box-1 {width:300px; margin:10px; padding:10px; background:#d8d7d7; position:absolute; top:0; left:0;}
...
Как видно по нашему второму примеру, серый блок теперь отображается в верхнем левом углу. Не смотря на то, что остальные элементы соответствуют нашему коду HTML.
Таким образом, посредством значения «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».
Давайте рассмотрим реальный пример такого метода в блоге.
Уже задавались вопросы по поводу того, как реализуется метод, где графическая форма высказывания используется для комментариев, а конкретнее, людей интересовало, как позже сделать так, чтобы графическая форма высказывания адаптировалась под размер каждого комментария.
На самом деле, в этой форме с комментариями всего один графический элемент: изображение стрелочки, которое указывает на аватар автора комментария. Все остальное – это просто серый фон (такой же, который был и в предыдущих примерах), а углы были закруглены посредством нового модуля 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>
Ниже вы видите изображение того, что у нас получилось:
Теперь мы без труда можем позиционировать стрелочку в режиме абсолюта, но относительно нашего блока: будет достаточно разместить ее внутри блока и присвоить ей параметр абсолютного позиционирования, а также задать ей значения «top» и «left» относительно самого блока.
Добавляем стрелку внутрь блока, путем добавления следующего кода HTML:
<img src="images/arrow.gif" class="arrow" alt=" " />
Как видно, мы присвоили изображению класс «arrow», который будет служить нам для установки позиционирования относительно блока. На данный момент, мы еще не внесли нужные изменения в наши таблицы стилей, пока что нам просто нужно обновить страницу и проверить – правильно ли мы добавили стрелочку – она должна быть внутри блока под текстом (так она расположена в нашем коде HTML):
Теперь, вносим в наш CSS новый класс «img.arrow» для позиционирования стрелки в режиме абсолюта, предоставляя конкретные координаты расположения, посредством значений «top» и «left»:
...
img.arrow {position:absolute; top:30px; left:-22px;}
...
Теперь посмотрите на результат.
Заключение
Позиционирование элементов, как уже было сказано, это один из важнейших аспектов CSS, так что хороший веб-дизайнер должен в идеале владеть этими параметрами. В последующих статьях мы постараемся рассказать вам о других значениях, которые могут быть применены к параметру «position», и вы увидите, как, посредством простеньких строчек кода CSS, можно достигать невероятных результатов.