Абсолютное позиционирование
При абсолютном позиционировании элемент не существует в потоке документа и его положение задаётся относительно краёв браузера. Установить этот тип можно через значение absolute свойства position . Координаты указываются относительно краёв окна браузера, называемого «видимой областью» или «областью просмотра» (рис. 1).
Рис. 1. Значения свойств left, right, top и bottom при абсолютном позиционировании
Для элемента с абсолютным позиционированием характерны следующие особенности.
- Ширина элемента, если она не задана явно, определяется шириной содержимого плюс значения padding , border и margin .
- Элемент не меняет своё исходное положение, если у него нет свойств right , left , top и bottom .
- Одновременно указанные свойства left и right формируют ширину элемента, но только если width не указано. Стоит добавить свойство width и значение right будет проигнорировано. Аналогично произойдёт и с высотой элемента, но уже участвуют свойства top , bottom и height .
- Свойства left и top имеют более высокий приоритет по сравнению с right и bottom . Если left и right противоречат друг другу, то значение right игнорируется. То же самое касается и bottom .
- Если left задать отрицательное значение, то элемент уйдёт за левый край браузера, полосы прокрутки при этом не возникнет. То же относится и к свойству top , только элемент уйдёт за верхний край.
- Если left задать значение больше ширины видимой области или указать right с отрицательным значением, то появится горизонтальная полоса прокрутки. Подобное правило работает и с top , только речь пойдёт о вертикальной полосе прокрутки.
- Элемент перемещается вместе с документом при его прокрутке.
- Работает свойство z-index, при этом абсолютно позиционированные элементы перекрывают статичные элементы, даже если они в коде ниже.
Свойство position со значением absolute можно использовать для создания эффекта фреймов. Кроме абсолютного позиционирования для элементов следует назначить свойство overflow со значением auto . Тогда, если содержимое превысит высоту видимой области, появится полоса прокрутки. Высота и ширина «фреймов» формируется автоматически путём одновременного использования свойств left , right для ширины и top , bottom для высоты (пример 1).
Пример 1. Имитация фреймов
Плов народов мира
Плов узбекский
Плов сибирский
Плов итальянский
Плов эстонский
Плов по-американски
Плов по-индейски
Положить в казан нарезанное кусочками мясо и поджарить его до образования корочки. Нашинкованный кольцами лук жарить вместе с мясом до красноватого цвета, затем добавить морковь, нарезанную соломкой. Положить половину соли, всё перемешать и жарить, пока морковь не приобретёт золотисто-коричневый цвет. После этого налить половину необходимого количества воды и дать закипеть.
Засыпать ровным слоем рис, усилить огонь и тотчас налить воду, чтобы она накрыла рис на 1–1,5 см. Как только вода выпарится, плов при помощи шумовки собрать к середине горкой, проколоть палочкой в нескольких местах так, чтобы вода, находящаяся на поверхности, прошла на дно. Затем накрыть плов и дать ему упреть 20–25 мин.
Тщательно перемешайте готовый плов, переложите в большое блюдо, сверху разложите мясо.
Результат данного примера показан на рис. 2. Элемент выводится в потоке как обычно, а для sidebar и content установлено абсолютное позиционирование.
Рис. 2. Имитация фреймов на веб-странице
Тот же самый приём, когда мы задаём размеры элемента с помощью свойств left , right , top и bottom , применяется для создания разных эффектов. К примеру, можно сделать затемнение веб-страницы для вывода сообщения и привлечения к нему внимания. В примере 2 добавляется элемент с классом overlay , размеры которого занимают всю область просмотра. Делаем его полупрозрачного чёрного цвета, а поверх отображаем блок с классом dialog , который выводится по центру горизонтали.
Пример 2. Затемнение веб-страницы
Результат данного примера показан на рис. 3.
Рис. 3. Диалоговое окно с затемнением
Обратите внимание, что для вывода абсолютно позиционированного элемента по центру горизонтали применяется следующий стиль.
Таким образом, сочетание width , left , right и margin управляет выравниванием элементов.
Абсолютное позиционирование позволяет также скрывать элементы. Для этого часто добавляется стиль left: -9999px , который переносит элемент далеко влево за область просмотра. В частности, этот приём используется для стилизации переключателей и флажков, когда мы скрываем настоящий флажок, а вместо него стилизуем элемент , связанный с и выполняющим его функции (пример 3).
Пример 3. Стилизация флажка
How to Absolutely Position an Image using CSS
In this lesson, I will show you how to use CSS to absolutely position an image. The example I will use is that of a blog header image with the author’s image positioned to the bottom left of the blog image. This is quite a common design to see on blog posts and it can be easily achieved.
THE FINISHED FLEXBOX AND CSS DESIGN
Above is a screenshot of the finished design. The author’s photo has been absolutely positioned against the blog image. A white border has also been placed around the author’s image to lift it from the background blog image.
THE HTML
The HTML structure is fairly straightforward and consists of nested div elements. The container div is not required although it has been included to demonstrate how the design might fit into a larger page design where container divs are typically used.
Line 14: this is the div that holds both the blog image and the author image. The position attribute of this div will be set to relative.
THE CSS
Again, relatively simple code is used:
Lines 1 — 4: these are not required if you are not using the container div element. The display is set to flex and then we set the content to center.
Lines 6 — 8: the blog-header div is set to relative positioning. All content within this div can then be set to absolute positioning.
Lines 12: note that the absolute position of the author’s image is set to -25px from the bottom. This ensures that the author’s image extends beyond the bottom of the blog image. The author’s image has dimensions of 100px by 100px. You may wish to adjust the position of your images according to your dimensions.
Line 14: a border radius of 53px is used. This gives the round image for the author. The full width of the image is 106px (100px image width + 3px border width on each side. Divide this by 2 to get the border radius).
This is a very simple example of what can be achieved using relative and absolute positioning of elements. I realise that Flexbox has only been used for the container div but, hopefully, you can see how this can be used in conjunction with absolute positioning.
Абсолютное позиционирование
При абсолютном позиционировании элемент не существует в потоке документа и его положение задаётся относительно краёв браузера. Установить этот тип можно через значение absolute свойства position . Координаты указываются относительно краёв окна браузера, называемого «видимой областью» или «областью просмотра» (рис. 1).
Рис. 1. Значения свойств left, right, top и bottom при абсолютном позиционировании
Для элемента с абсолютным позиционированием характерны следующие особенности.
- Ширина элемента, если она не задана явно, определяется шириной содержимого плюс значения padding , border и margin .
- Элемент не меняет своё исходное положение, если у него нет свойств right , left , top и bottom .
- Одновременно указанные свойства left и right формируют ширину элемента, но только если width не указано. Стоит добавить свойство width и значение right будет проигнорировано. Аналогично произойдёт и с высотой элемента, но уже участвуют свойства top , bottom и height .
- Свойства left и top имеют более высокий приоритет по сравнению с right и bottom . Если left и right противоречат друг другу, то значение right игнорируется. То же самое касается и bottom .
- Если left задать отрицательное значение, то элемент уйдёт за левый край браузера, полосы прокрутки при этом не возникнет. То же относится и к свойству top , только элемент уйдёт за верхний край.
- Если left задать значение больше ширины видимой области или указать right с отрицательным значением, то появится горизонтальная полоса прокрутки. Подобное правило работает и с top , только речь пойдёт о вертикальной полосе прокрутки.
- Элемент перемещается вместе с документом при его прокрутке.
- Работает свойство z-index, при этом абсолютно позиционированные элементы перекрывают статичные элементы, даже если они в коде ниже.
Свойство position со значением absolute можно использовать для создания эффекта фреймов. Кроме абсолютного позиционирования для элементов следует назначить свойство overflow со значением auto . Тогда, если содержимое превысит высоту видимой области, появится полоса прокрутки. Высота и ширина «фреймов» формируется автоматически путём одновременного использования свойств left , right для ширины и top , bottom для высоты (пример 1).
Пример 1. Имитация фреймов
Плов народов мира
Плов узбекский
Плов сибирский
Плов итальянский
Плов эстонский
Плов по-американски
Плов по-индейски
Положить в казан нарезанное кусочками мясо и поджарить его до образования корочки. Нашинкованный кольцами лук жарить вместе с мясом до красноватого цвета, затем добавить морковь, нарезанную соломкой. Положить половину соли, всё перемешать и жарить, пока морковь не приобретёт золотисто-коричневый цвет. После этого налить половину необходимого количества воды и дать закипеть.
Засыпать ровным слоем рис, усилить огонь и тотчас налить воду, чтобы она накрыла рис на 1–1,5 см. Как только вода выпарится, плов при помощи шумовки собрать к середине горкой, проколоть палочкой в нескольких местах так, чтобы вода, находящаяся на поверхности, прошла на дно. Затем накрыть плов и дать ему упреть 20–25 мин.
Тщательно перемешайте готовый плов, переложите в большое блюдо, сверху разложите мясо.
Результат данного примера показан на рис. 2. Элемент выводится в потоке как обычно, а для sidebar и content установлено абсолютное позиционирование.
Рис. 2. Имитация фреймов на веб-странице
Тот же самый приём, когда мы задаём размеры элемента с помощью свойств left , right , top и bottom , применяется для создания разных эффектов. К примеру, можно сделать затемнение веб-страницы для вывода сообщения и привлечения к нему внимания. В примере 2 добавляется элемент с классом overlay , размеры которого занимают всю область просмотра. Делаем его полупрозрачного чёрного цвета, а поверх отображаем блок с классом dialog , который выводится по центру горизонтали.
Пример 2. Затемнение веб-страницы
Результат данного примера показан на рис. 3.
Рис. 3. Диалоговое окно с затемнением
Обратите внимание, что для вывода абсолютно позиционированного элемента по центру горизонтали применяется следующий стиль.
Таким образом, сочетание width , left , right и margin управляет выравниванием элементов.
Абсолютное позиционирование позволяет также скрывать элементы. Для этого часто добавляется стиль left: -9999px , который переносит элемент далеко влево за область просмотра. В частности, этот приём используется для стилизации переключателей и флажков, когда мы скрываем настоящий флажок, а вместо него стилизуем элемент , связанный с и выполняющим его функции (пример 3).
Пример 3. Стилизация флажка