position свойство задает тип способа позиционирования , используемый для элемента (статический, родственник, фиксированный или абсолютный).
Положение недвижимости
position свойство задает тип способа позиционирования , используемый для элемента.
Есть четыре различных значения положения:
-
static -
relative -
fixed -
absolute
Элементы затем устанавливают с помощью сверху, снизу, слева и справа свойства. Тем не менее, эти свойства не будут работать , если position свойство не устанавливается в первую очередь. Они также работают по-разному в зависимости от значения положения.
position: static;
HTML элементы расположены статические по умолчанию.
Статические позиционируемые элементы не влияют сверху, снизу, слева и справа свойствами.
Элемент с position: static; находится не в какой - либо особым образом; она всегда находится в соответствии с нормальным потоком страницы:
Вот CSS, который используется:
position: relative;
Элемент с position: relative; позиционируется относительно своего нормального положения.
Установка верхней, правой, нижней и левой свойства относительно-позиционируемый элемент заставит его быть отрегулировано от своего нормального положения. Другое содержание не будет скорректирован, чтобы вписаться в любую щель, оставленную элементом.
Вот CSS, который используется:
position: fixed;
Элемент с position: fixed; позиционируется по отношению к иллюминатору, что означает , что он всегда остается в том же месте , даже если страница прокручивается. Сверху, справа, снизу, и левые свойства используются для позиционирования элемента.
Неподвижный элемент не оставляет пробел на странице, где она, как правило, были расположены.
Обратите внимание на фиксированный элемент в правом нижнем углу страницы. Вот CSS, который используется:
пример
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width:
300px;
border: 3px solid #73AD21;
} Попробуй сам " position: absolute;
Элемент с position: absolute; позиционируется относительно ближайшего расположенного предка (вместо позиционирован относительно окна просмотра, как и фиксированный).
Однако; если абсолютный позиционируемый элемент не имеет расположенные предков, она использует тело документа, и перемещается вместе с прокруткой страницы.
Примечание: "positioned" элемент, чья позиция ничего , кроме static .
Вот простой пример:
Вот CSS, который используется:
пример
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
Попробуй сам " Перекрытие элементы
Когда элементы расположены, они могут перекрывать другие элементы.
z-index свойство определяет порядок стека элемента (какой элемент должен быть помещен в передней части, или позади, другие).
Элемент может иметь положительный или отрицательный порядок стека:
Это заголовок
Поскольку изображение имеет Z-индекс -1, то он будет помещен за текстом.
Элемент с большим порядком стека всегда находится в передней части элемента с более низкого порядка стека.
 | Примечание: Если два позиционируемые элементы перекрываются без z-index указанного, элемента , расположенного последним в HTML - коде будет показан на вершине. |
|---|
Позиционирование текста в изображении
Как позиционировать текст поверх изображения:
пример
Попробуй сам:
Верхний левый » Верхний правый» Внизу слева » Внизу справа» По центру »
Еще примеры
Установить форму элемента
Этот пример показывает, как установить форму элемента. Элемент обрезается в эту форму, и отображается.
Как показать переполнение в элементе с помощью прокрутки
Этот пример показывает, как установить свойство переполнения, чтобы создать полосу прокрутки, когда содержимое элемента является слишком большим, чтобы поместиться в указанной области.
Как настроить браузер для автоматической обработки переполнения
Этот пример демонстрирует, как настроить браузер для автоматической обработки переполнения.
Изменение курсора
Этот пример демонстрирует, как изменить курсор.
Проверьте себя с упражнениями!
Упражнение 1 » Упражнение 2» Упражнение 3 » Упражнение 4» Упражнение 5 »
Все свойства CSS позиционирования
| Имущество | Описание |
|---|---|
| bottom | Устанавливает нижний край поля для позиционированного бокса |
| clip | Клипы абсолютно позиционируемый элемент |
| cursor | Определяет тип курсора, который будет отображаться |
| left | Устанавливает левый край поля для позиционированного бокса |
| overflow | Указывает, что происходит, если содержимое переполняет бокс элемента не давал |
| overflow-x | Указывает, что делать с левым / правым краями содержания, если оно переполняет область содержимого элемента |
| overflow-y | Указывает, что делать с верхними / нижними краями содержания, если оно переполняет область содержимого элемента |
| position | Задает тип позиционирования для элемента |
| right | Устанавливает правый край поля для позиционированного бокса |
| top | Устанавливает верхний край маржи для позиционированного бокса |
| z-index | Устанавливает порядок стека элемента |