CSS позиционирование: абсолютное, относительное
- Поток документа
- Статическое позиционирование
- Фиксированное позиционирование
- Относительное позиционирование
- Абсолютное позиционирование
- Перекрывающие элементы
Позиционирование — это управление местом расположения (позицией) элемента на веб-странице, оно контролируется с помощью CSS свойства position.
Для указания точного места расположения позиционированных элементов, используются CSS свойства: top, right, bottom и left. Они работают со всеми позиционированными элементами, кроме статических.
Пример позиционирования.
Элементы могут перекрывать друг друга!
Отображение элемента над остальными!
Свойство position имеет 4 значения: static, fixed, relative и absolute. Каждое из этих значений будет продемонстрировано ниже с примером использования.
Перед тем как подробно разобрать все виды позиционирования элементов на странице, нам придется рассмотреть, что такое поток документа.
Поток документа
По умолчанию элементы на веб-странице отображаются в том порядке, в котором они представлены в HTML-документе, т. е. блочные элементы занимают всю доступную для них ширину и укладываются вертикально один под другим. Строчные элементы выстраиваются по горизонтали до тех пор, пока не будет занята вся доступная ширина, после того как вся ширина будет занята, будет сделан перенос строки и всё пойдет по новой. Такой порядок расположения элементов называется нормальным потоком (его также называют потоком документа или общим потоком).
С помощью свойства float или position можно убрать элемент из нормального потока. Если элемент «выпадает» из нормального потока, то элементы, которые расположены в коде ниже этого элемента будут смещены на его место на веб-странице.
Статическое позиционирование
Статическим называют позиционирование, заданное по умолчанию для всех элементов на веб-странице.
Если к элементу не применять свойство position
При применении CSS свойств top, left, right или bottom к статически позиционированному элементу, они будут игнорироваться.
Если есть необходимость, то можно задать статическое позиционирование в таблице стилей с помощью значения static:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Название документа</title>
<style>
p { position: static; }
</style>
</head>
<body>
<p>Первый абзац.</p>
<p>Второй абзац.</p>
</body>
</html>
Попробовать »
Фиксированное позиционирование
Элементы с фиксированным позиционированием располагаются на странице относительно окна браузера.
Стоит обратить внимание на то, что элементы с фиксированным позиционирование могут перекрывать другие элементы, скрывая их полностью или частично. При прокрутке длинных страниц, они создают эффект неподвижных объектов, оставаясь на одном и том же месте:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Название документа</title>
<style>
img {
position: fixed;
top: 5%;
left: 40%
}
</style>
</head>
<body>
<img src="donald.gif">
<pre>Текст
Текст
Текст
Текст
Текст
Текст
Текст
Какой-то текст
Текст
Текст
Текст
Текст
Текст</pre>
</body>
</html>
Попробовать »
Относительное позиционирование
Элементы с относительным позиционированием, как и статические элементы, остаются в общем потоке.
При применении свойств top, left, right или bottom к относительно позиционированным элементам, они будут смещаться относительно своего местоположения, оставляя пустое пространство там, где элемент располагался изначально.
Такие элементы не влияют на расположение окружающих их элементов, остальные элементы остаются на своих местах и могут быть перекрыты относительно позиционированным элементом:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Название документа</title>
<style>
h3 {
position: relative;
top: 30px;
}
</style>
</head>
<body>
<h2>Заголовок первого уровня.</h2>
<h3>Относительно позиционированный заголовок.</h3>
<h4>Заголовок третьего уровня.</h4>
</body>
</html>
Попробовать »
Примечание: элементы с относительным позиционированием (relative) обычно используют в качестве родителя для элементов с абсолютным позиционированием (absolute).
Абсолютное позиционирование
Элементы с абсолютным позиционированием полностью удаляются из общего потока, остальные элементы будут занимать освободившееся пространство, полностью игнорируя абсолютно позиционированные элементы. Затем можно позиционировать элемент в любое нужное место веб-страницы, используя свойства left, right или bottom.
Все абсолютно позиционированные элементы размещаются относительно окна браузера или относительно ближайшего позиционированного предка (если он есть), у которого свойство position имеет значение absolute, fixed или relative.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Название документа</title>
<style>
img {
position: absolute;
right: 0px;
top: 0px;
}
</style>
</head>
<body>
<img src="image.
jpg">
<p>Изменим расположение логотипа с помощью абсолютного позиционирования.<br>
Теперь логотип будет располагаться в правом верхнем углу страницы.</p>
</body>
</html>
jpg">
<p>Изменим расположение логотипа с помощью абсолютного позиционирования.<br>
Теперь логотип будет располагаться в правом верхнем углу страницы.</p>
</body>
</html>
Попробовать »
Перекрывающие элементы
Когда элементы находятся вне общего потока страницы, они могут перекрывать друг друга. Обычно порядок расположения элементов соответствует их порядку в HTML-коде страницы, однако есть возможность управлять порядком перекрытия с помощью CSS свойства z-index, чем больше его значение, тем выше будет элемент.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Название документа</title>
<style>
div {
position: absolute;
width: 100px;
height: 100px;
}
.div1 {
background-color: #66FFFF;
left: 70px;
top: 0px;
z-index: 1;
}
. div2 {
background-color: #FFFF66;
left: 0px;
top: 30px;
z-index: 0;
}
.div3 {
background-color: #66FF66;
left: 33px;
top: 60px;
z-index: 2;
}
</style>
</head>
<body>
<div>z-index: 1;</div>
<div>z-index: 0;</div>
<div>z-index: 2;</div>
</body>
</html>
Попробовать »
Абсолютное позиционирование элементов на CSS
В данном уроке мы с вами разберем абсолютное
позиционирование элементов. Оно позволяет
располагать элементы по указанным координатам
страницы. Например, можно расположить элемент
в позицию 100px сверху страницы и 200px
Для того, чтобы сделать элемент абсолютно
спозиционированным, этому элементу необходимо
задать свойство position в значении absolute. Кроме этого свойства, нужны
еще два: одно будет задавать координату по
вертикали, а второе — по горизонтали.
Для вертикали нужно задать отступ или сверху,
или снизу. Отступ сверху задает свойство top, а отступ снизу — свойство bottom.
Для горизонтали нужно задать отступ или слева,
или справа. Отступ слева задает свойство left, а отступ справа — свойство right
Давайте посмотрим на примерах.
Пример
Для начала давайте просто сделаем два блока без позиционирования (обратите внимание на то, что элементы не прижаты к краю окна, так как body имеет margin по умолчанию):
<div></div>
<div></div>#elem1 {
width: 200px;
height: 200px;
border: 1px solid red;
}
#elem2 {
width: 100px;
height: 100px;
border: 1px solid green;
}
:
Пример
Давайте теперь зеленому блоку зададим абсолютное
позиционирование, поставив его в позицию
сверху 150px и слева 100px:
<div></div>
<div></div>#elem1 {
width: 200px;
height: 200px;
border: 1px solid red;
}
#elem2 {
position: absolute;
top: 150px;
left: 100px;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
Пример
Давайте теперь поставим зеленый блок в позицию 0px сверху и 0px слева:
<div></div>
<div></div>#elem1 {
width: 200px;
height: 200px;
border: 1px solid red;
}
#elem2 {
position: absolute;
top: 0px;
left: 0px;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
Пример
Давайте теперь поставим зеленый блок в позицию 0px сверху и 0px справа:
<div></div>
<div></div>#elem1 {
width: 200px;
height: 200px;
border: 1px solid red;
}
#elem2 {
position: absolute;
top: 0;
right: 0;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
Пример
Давайте теперь поставим зеленый блок в позицию 0px снизу и 0px справа:
<div></div>
<div></div>#elem1 {
width: 200px;
height: 200px;
border: 1px solid red;
}
#elem2 {
position: absolute;
bottom: 0;
right: 0;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
Пример
Давайте теперь поставим зеленый блок в позицию 0px снизу и 0px слева:
<div></div>
<div></div>#elem1 {
width: 200px;
height: 200px;
border: 1px solid red;
}
#elem2 {
position: absolute;
bottom: 0;
left: 0;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
Практические задачи
С помощью абсолютного позиционирования разместите блоки следующим образом:
С помощью абсолютного позиционирования разместите блоки следующим образом:
С помощью абсолютного позиционирования разместите блоки следующим образом:
С помощью абсолютного позиционирования разместите блоки следующим образом:
Разница между абсолютной позицией css и относительной | Автор Leanne Zhang
Я потратил некоторое время, чтобы понять разницу между абсолютным и относительным позиционированием.
Для меня это была запутанная тема, и я решил проиллюстрировать их различия картинками.
Прежде чем двигаться дальше, мы должны знать поведение по умолчанию position, когда мы не указываем никакого свойства position.
position: static
По умолчанию позиционирует элемент на основе его текущей позиции в потоке.
сверху,справа,снизу,слеваиz-indexсвойства не применяются. — source MDN
position: относительный Позиционировать элемент на основе его текущей позиции без изменения макета.
position: absolute Позиционирование элемента на основе его ближайшего позиционированного положения предка.
Для начала создайте родительский контейнер с 4 ящиками рядом.
position: staticindex.html
Один
Три
Четыре
style.
css
.parent {
граница: 2 пикселя с черными точками; Дисплей
: встроенный блок;
}.box {
display: inline-block;
фон: красный;
ширина: 100 пикселей;
высота: 100 пикселей;
}#two {
фон: зеленый;
} Текущий код: JsBin
По умолчанию для позиции установлено статическое значение. Он позиционируется на основе макета в потоке.
Что происходит, когда мы хотим переместить GreenBox, но не хотим влиять на компоновку вокруг него?
position: relativeЗдесь вступает в игру относительное положение. Переместите зеленую рамку относительно ее текущей позиции на 20 пикселей слева и сверху, не меняя макет вокруг нее. Таким образом, , оставив пробел для зеленого прямоугольника, где он был бы, если бы не был в позиции.
#two {
top: 20px;
слева: 20 пикселей;
фон: зеленый;
должность: относительная;
} Текущий код: JsBin
Позиция: absolute противоположна.
position: absoluteПрименив position: absolute к GreenBox, он , а не оставит пробел там, где он был бы. Положение GreenBox основано на его родительском положении (пунктирная граница). Таким образом, перемещаемся на 20 пикселей влево и вниз от верхнего левого начала пунктирной границы.
#two {
top: 20px;
слева: 20 пикселей;
фон: зеленый;
позиция: абсолютная;
} Текущий код: JsBin
позиция: относительная помещает элемент относительно его текущей позиции без изменения макета вокруг него, тогда как позиция: абсолютная помещает элемент относительно его родительской позиции и меняет макет вокруг него .
Использование абсолютного позиционирования
Использование абсолютного позиционированияИспользование Абсолютное позиционирование
Обзор
Каскадная таблица стилей
(CSS) позволяют размещать элементы HTML на странице абсолютно независимо от
их положение в потоке HTML.
Абсолютно позиционированный элемент HTML имеет
его атрибут стиля CSS POSITION установлен в абсолютное значение вместо статического.
Абсолютный стиль удаляет элемент из обычного потока HTML и позиционирует его, используя кнопки TOP и LEFT. атрибуты таблицы стилей, которые описывают положение элемента в пикселях от верхняя и левая стороны документа или контейнера. По существу, абсолютные элементы используют система координат на основе пикселей x и y. Абсолютные элементы также имеют Z-индекс, который определяет визуальный порядок перекрывающихся абсолютных элементов и то, как абсолютные элементы упорядочены относительно элементов в потоке HTML.
Элементы, которые не абсолютно позиционированные, называются статически позиционированными элементами или 1-D элементы.
Абсолютное позиционирование
упрощает задачу размещения HTML-элементов на странице; тем не менее, используя абсолютный
расположение не всегда уместно. Иногда, особенно когда задействован код RPG,
использование статических элементов более уместно.
HTML-код для статических элементов имеет тенденцию
быть более организованным, чем код HTML для абсолютных элементов, и вы можете предпочесть
используйте HTML-таблицы для упорядочивания и позиционирования статических элементов. В зависимости от приложения,
организация статических элементов с помощью HTML-таблиц может быть даже более гибкой, чем преобразование
элементы в абсолютное позиционирование. Например, мастера RPGsp используют HTML-таблицы для представления
формы ввода и списки подфайлов. Вы можете предпочесть использовать внешний специализированный инструмент
для верстки таблиц HTML.
Однако бывают случаи, когда использование абсолютного позиционирования имеет смысл. Абсолютное позиционирование часто используется для отдельного текста, изображений логотипов, переменных RPG, кнопок и таблиц.
Вы также можете смешать
абсолютные и статические элементы на одной странице. Есть много разных комбинаций.
Например, абсолютно позиционированная таблица может быть использована для организации нескольких статических
HTML-элементы внутри себя.
Некоторые элементы могут быть абсолютными, в то время как другие элементы, такие как переменные RPG и текст, должны быть заключенным в абсолютный контейнер. Абсолютный контейнер использует абсолютный
Вот пример абсолютного контейнера, включающего в себя таблицу, гиперссылки и РПГ переменные. Контейнер можно перемещать как единое целое и позиционировать с помощью кнопок ВЛЕВО и ВЕРХ. атрибуты стиля.
Создание абсолютные элементы
Конструктор страниц
предоставляет команды для вставки абсолютных элементов или преобразования любого статического элемента
в абсолютный элемент и наоборот.
Чтобы вставить новый абсолютный элемент, просто выберите его в меню «Вставка» или щелкните на соответствующем значке в абсолютном разделе Панель инструментов. Код HTML для абсолютного элемента или абсолютного якорь элемента () помещается в точку вставки, а сам элемент изначально позиционируется ближе к середине страницы.
Чтобы преобразовать существующий элемент в абсолютный элемент, щелкните элемент правой кнопкой мыши и выберите Сделать абсолютным , или для выделенного текста и переменных RPG выберите Enclose in Absolute Style Container .
Для преобразования абсолютного элемент обратно в статический элемент, щелкните правой кнопкой мыши и выберите Удалить абсолютный атрибут . Обратите внимание, что для абсолютных контейнеров тег
Изменение Z-индекс
Чтобы изменить порядок
(или глубины) выбранного абсолютно позиционированного элемента относительно другого абсолютного
элементы в своем контейнере, щелкните элемент правой кнопкой мыши и выберите подменю Z-index.
Вам будут представлены следующие варианты:
- Приводной элемент вперед. Приносит элемент на передний слой, чтобы он отображался поверх перекрывающихся элементов. Устанавливает Z-индекс выше, чем у всех других элементов в его контейнере.
- Передающий элемент назад. Посылает элемент на задний слой, чтобы любые перекрывающиеся элементы отображались сверху этого. Устанавливает Z-индекс ниже, чем у всех других элементов в его контейнере.
- Привести элемент вперед. ходов этот элемент перед элементом с ближайшим Z-индексом. Приращения Z-индекс (и корректирует Z-индекс других элементов).
- Передающий элемент назад. Перемещает этот элемент за элемент с ближайшим Z-индексом. Уменьшает Z-индекс (и корректирует Z-индекс других элементов).
- Привести элемент
над текстом. Изменяет Z-индекс элемента на положительное число, чтобы поместить
перед одномерными элементами и текстом на странице.
- Передающий элемент ниже текст. Изменения Z-индекс элемента на отрицательное число, чтобы поместить его за одномерными элементами и текст на странице.
Переезд абсолютные элементы
Вы можете перемещать абсолютно позиционированный элемент, выбрав его и перетащив в определенное место на страница. После того, как элемент был позиционирован, дизайнер страницы просто обновляет атрибуты стиля LEFT и TOP элемента, чтобы отразить новое положение.
Кому сдвинуть абсолют RPG, вы должны перетащить ее за абсолютную границу контейнера. В противном случае вы можете в конечном итоге перетащите переменную RPG из контейнера, что сделает ее не абсолютной.
Абсолютно позиционировано элементы также можно перемещать по пикселям с помощью клавиш со стрелками.
Для предотвращения абсолютного элементы от случайного перемещения, их можно зафиксировать на месте.
Когда элемент
заблокированы, непреднамеренное движение мыши или клавиши со стрелками не будут перемещать их, и они не могут
подтолкнуть.