наверх





Через CSS мы можем задать то, как будет позиционироваться элемент на документе относительно других элементов. Делается это при помощи свойства position.
Данное свойство имеет ряд простых значений, изучим их.

absolute


Значение устанавливает то, что рядом стоящие элементы будут отображаться так, как будто нашего элемента, с данным свойством и значением, на странице не существует. При этом сам элемент будет находится в левой верхней части страницы, если у него нет родительских элементов с таким же свойством position absolute relative fixed. А если есть, то он будет находится относительно их расположения.

fixed


Данное значение устанавливает фиксирующее положение элемента на странице. Его координаты будут привязаны к X,Y сторонам браузера. То есть, даже при скролле элемент останется на своей позиции относительно сторон браузера.

relative


Данное значение указывает положение элемента относительно его исходного места.

static


Значение устанавливает элемент так, как он должен располагаться в обычном состояние относительно других элементов.

Смещение


Установив значения absolute relative fixed элементом возможно манипулировать, перемещая его относительно других элементов. Делается это свойствами top, right, bottom, left. Значения данных свойств устанавливают на сколько сместится элемент относительного текущего положения.

#wrapper {
  position: relative;
  bottom: 15px; /* смещен на 15px от низа */
  left: 30px; /* смещен на 30px слева */
}


При этом можно указывать и отрицательные значения.

#wale {
  position: relative;
  right: -10px; /* смещен на -10px справа (10px слева) */
}






Поделиться
Box-shadow генератор
Занимаетесь веб-разработкой? Полноценный кроссбраузерный box-shadow генератор с поддержкой нескольких теней.


Комментарии — 0


У вас нет прав для добавления комментария. Зарегистрируйтесь или авторизуйтесь.