Свойство position
Свойство position позволяет сдвигать элемент со своего обычного места. Цель этой главы – не только напомнить, как оно работает, но и разобрать ряд частых заблуждений и граблей.
position: static
Статическое позиционирование производится по умолчанию, в том случае, если свойство position не указано.
Его можно также явно указать через CSS-свойство:
Такая запись встречается редко и используется для переопределения других значений position .
Здесь и далее, для примеров мы будем использовать следующий документ:
В этом документе сейчас все элементы отпозиционированы статически, то есть никак.
Элемент с position: static ещё называют не позиционированным.
position: relative
Относительное позиционирование сдвигает элемент относительно его обычного положения.
Для того, чтобы применить относительное позиционирование, необходимо указать элементу CSS-свойство position: relative и координаты left/right/top/bottom .
Этот стиль сдвинет элемент на 10 пикселей относительно обычной позиции по вертикали:
Координаты
Для сдвига можно использовать координаты:
- top – сдвиг от «обычной» верхней границы
- bottom – сдвиг от нижней границы
- left – сдвиг слева
- right – сдвиг справа
Не будут работать одновременно указанные top и bottom , left и right . Нужно использовать только одну границу из каждой пары.
Возможны отрицательные координаты и координаты, использующие другие единицы измерения. Например, left: 10% сдвинет элемент на 10% его ширины вправо, а left: -10% – влево. При этом часть элемента может оказаться за границей окна:
Свойства left/top не будут работать для position:static . Если их все же поставить, браузер их проигнорирует. Эти свойства предназначены для работы только с позиционированными элементами.
position: absolute
Абсолютное позиционирование делает две вещи:
- Элемент исчезает с того места, где он должен быть и позиционируется заново. Остальные элементы, располагаются так, как будто этого элемента никогда не было.
- Координаты top/bottom/left/right для нового местоположения отсчитываются от ближайшего позиционированного родителя, т.е. родителя с позиционированием, отличным от static . Если такого родителя нет – то относительно документа.
- Ширина элемента с position: absolute устанавливается по содержимому. Детали алгоритма вычисления ширины описаны в стандарте.
- Элемент получает display:block , который перекрывает почти все возможные display (см. Relationships between „display“, „position“, and „float“).
Например, отпозиционируем заголовок в правом-верхнем углу документа:
Важное отличие от relative : так как элемент удаляется со своего обычного места, то элементы под ним сдвигаются, занимая освободившееся пространство. Это видно в примере выше: строки идут одна за другой.
Так как при position:absolute размер блока устанавливается по содержимому, то широкий Заголовок «съёжился» до прямоугольника в углу.
Иногда бывает нужно поменять элементу position на absolute , но так, чтобы элементы вокруг не сдвигались. Как правило, это делают, меняя соседей – добавляют margin/padding или вставляют в документ пустой элемент с такими же размерами.
В абсолютно позиционированном элементе можно одновременно задавать противоположные границы.
Браузер растянет такой элемент до границ.
Как растянуть абсолютно позиционированный блок на всю ширину документа?
Первое, что может прийти в голову:
Но это будет работать лишь до тех пор, пока у страницы не появится скроллинг!
Прокрутите вниз ифрейм:
Вы увидите, что голубой фон оканчивается задолго до конца документа.
Дело в том, что в CSS 100% относится к ширине внешнего блока («containing block»). А какой внешний блок имеется в виду здесь, ведь элемент изъят со своего обычного места?
В данном случае им является так называемый (««initial containing block»»), которым является окно, а не документ.
То есть, координаты и ширины вычисляются относительно окна, а не документа.
Может быть, получится так?
С виду логично, но нет, не получится!
Координаты top/right/left/bottom вычисляются относительно окна. Значение bottom: 0 – нижняя граница окна, а не документа, блок растянется до неё. То есть, будет то же самое, что и в предыдущем примере.
position: absolute в позиционированном родителе
Если у элемента есть позиционированный предок, то position: absolute работает относительно него, а не относительно документа.
То есть, достаточно поставить родительскому div позицию relative , даже без координат – и заголовок будет в его правом-верхнем углу, вот так:
Нужно пользоваться таким позиционированием с осторожностью, т.к оно может перекрыть текст. Этим оно отличается от float .
Используем position для размещения элемента управления:
Часть текста перекрывается. Кнопка более не участвует в потоке.
Используем float для размещения элемента управления:
Браузер освобождает место справа, текст перенесён. Кнопка продолжает находиться в потоке, просто сдвинута.
position: fixed
Это подвид абсолютного позиционирования.
Позиционирует объект точно так же, как absolute , но относительно window .
Разница в нескольких словах:
Когда страницу прокручивают, фиксированный элемент остаётся на своём месте и не прокручивается вместе со страницей.
В следующем примере, при прокрутке документа, ссылка #top всегда остаётся на своём месте.
Итого
Виды позиционирования и их особенности.
static Иначе называется «без позиционирования». В явном виде задаётся только если надо переопределить другое правило CSS. relative Сдвигает элемент относительно текущего места.
- Противоположные границы left/right ( top/bottom ) одновременно указать нельзя.
- Окружающие элементы ведут себя так, как будто элемент не сдвигался.
absolute
Визуально переносит элемент на новое место.
Новое место вычисляется по координатам left/top/right/bottom относительно ближайшего позиционированного родителя. Если такого родителя нет, то им считается окно.
- Ширина элемента по умолчанию устанавливается по содержимому.
- Можно указать противоположные границы left/right ( top/bottom ). Элемент растянется.
- Окружающие элементы заполняют освободившееся место.
fixed
Подвид абсолютного позиционирования, при котором элемент привязывается к координатам окна, а не документа.
При прокрутке он остаётся на том же месте.
Почитать
CSS-позиционирование по-настоящему глубоко в спецификации Visual Formatting Model, 9.3 и ниже.
Ещё есть хорошее руководство CSS Positioning in 10 steps, которое охватывает основные типы позиционирования.
Задачи
Модальное окно
Создайте при помощи HTML/CSS «модальное окно», то есть DIV , который полностью перекрывает документ и находится над ним.
При этом все элементы управления на документе перестают работать, т.к. клики попадают в DIV .
В примере ниже DIV’у дополнительно поставлен цвет фона и прозрачность, чтобы было видно перекрытие:
Браузеры: все основные, IE8+. Должно работать при прокрутке окна (проверьте).
Если использовать position: absolute , то DIV не растянется на всю высоту документа, т.к. координаты вычисляются относительно окна.
Можно, конечно, узнать эту высоту при помощи JavaScript, но CSS даёт более удобный способ. Будем использовать position:fixed :
Свойство z-index должно превосходить все другие элементы управления, чтобы они перекрывались.
Источник
Некорректно работает position: absolute
Помощь в написании контрольных, курсовых и дипломных работ здесь.
не знаю, как быть. не отображается текст и иконки в IE 11, которые абсолютно спозиционированны.
Почему position: absolute не работает
Есть следующий код: хочу наложить один блок на другой (сделать так для трёх разных пар блоков).
Я заметил что это из-за того что боди высотой с вьюпорт и не больше а у меня там скролл.
Добавлено через 2 минуты
Вот код:
Добавлено через 2 минуты
Добавлено через 1 минуту
То есть высота body и html определяется размером вьюпорта, а не содержимым
Добавлено через 10 секунд
А это плохо
Добавлено через 27 минут
Всё, решил, не знаю как, но работает нормально, закрывайте тему.
Как связать блоки position: absolute; и position: relative; ?
Имеется слайдер position: absolute;. Картинка слайдера уменьшается пропорционально при уменьшении.
Не могу разобраться с position-relative и position-absolute
Дано: в блоке со свойствами position-relative помещен блок со свойствами position-absolute. Вопрос.
ie position absolute
Здравствуйте. Есть блок td.image-td .speclabel-wrap < position: relative; >И у него.
IE 8 и position: absolute
Не работает это свойство на ie8 ,перепробовал уже все методы из гугла, и с доктайпами и с.
Position: Absolute.
Всем привет! У меня вопрос: можно ли каким-либо образом при изменении размеров окна броузера.
Ошибка с position: absolute
Ошибка такова: Текст не должен наслаиваться на картинку, но это происходит. Я же описал так, что.
Источник
Position absolute bottom 0 не работает
| turing |
| ||
| Код |
| .material < width: 555px; height: 275px; > |
.material .photo <
float: left;
width: 180px;
margin-right: 30px;
>
.material .info <
position: relative;
width: 345px;
.material .info .description <
position: absolute;
margin-left: 210px;
/*top: 120px;*/
width: 100%;
bottom: 0;
>
Вопрос такой: почему top: 120px работает как надо, а bottom: 0 — ни в какую?
| blah |
| ||
Бывалый Профиль Репутация: 15 | |||
| |
| Itsys |
| ||
Эксперт Профиль Репутация: 9 Provence Antique | |||
| |
| turing |
| ||||||
| 0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей) | |
| 0 Пользователей: | |
| « Предыдущая тема | Вёрстка веб-сайтов | Следующая тема » |
[ Время генерации скрипта: 0.1003 ] [ Использовано запросов: 20 ] [ GZIP включён ]
Источник