Относительная привязка CSS
- Предыдущая страница Обзор привязки CSS
- Следующая страница Абсолютная привязка CSS
Фрейм элемента, установленный в относительное позиционирование, смещается на определенное расстояние. Элемент все равно сохраняет свою форму до позиционирования, и пространство, занимаемое им, все равно сохраняется.
Относительная привязка CSS
Относительное позиционирование - это очень легко понять концепция. Если применить относительное позиционирование к элементу, он появится в своей当前位置. Затем, можно установить вертикальное или горизонтальное положение, чтобы этот элемент "относительно" точки отсчета сместить.
Если установить top в 20px, то фрейм будет на 20 пикселей ниже верха исходного местоположения. Если установить left в 30 пикселей, то будет создано 30 пикселей пространства слева от элемента, что означает смещение элемента вправо.
#box_relative {
position: relative;
left: 30px;
top: 20px;
}
Как показано на следующем рисунке:
Обратите внимание, что при использовании относительного позиционирования элемент все равно занимает прежнее место. Поэтому перемещение элемента может привести к тому, что он перекроет другие фреймы.
Пример относительной привязки CSS
- Позиционирование: относительное позиционирование
- Этот пример демонстрирует, как позиционировать элемент относительно его обычного местоположения.
- Предыдущая страница Обзор привязки CSS
- Следующая страница Абсолютная привязка CSS
