Меню
Спросить
*.{ }

Позиционирование

27 октября 2015
Позиционирование

Эта небольшая статья посвящена позиционированию наших элементов на страничках, то есть, как они будут располагаться относительно страницы и других элементов в документе.
Располагать, перемещать наши элементы мы можем благодаря нескольким свойствам.
Первое и важное свойство это POSITION. Ему можно задать один из пяти параметров: ABSOLUTE, STATIC, FIXED, RELATIVE, INHERIT. По умолчанию стоит STATIC.

Рассмотри каждый из них вкратце.

ABSOLUTE – если задать этот параметр, то элемент станет свободным и практически не зависимым, вы сможете расположить его в любой точке родителя, с помощью свойств LEFT, RIGHT, TOP и BOTTOM. Говоря иначе, задаем это позиционирование и прописываем расстояние относительно всех краев (левое, правое, верх и низ). Если не задать это позиционирование, то эти 4 свойства работать не будут.

STATIC – этот параметр включен по умолчанию, элементы с таким параметром отображаются в обычном виде и свойства LEFT, RIGHT, TOP и BOTTOM использовать не получиться. Но, мы можем воспользоваться свойствами MARGIN-LEFT, MARGIN-RIGHT, MARGIN-TOP и MARGIN-BOTTOM.

FIXED – параметр похож на absolute, отличие лишь в том, что с этим параметром элемент будет стоять в той точке, в которую вы его поставили, и при прокрутке страницы, он будет прокручиваться вслед за ней.

RELATIVE – располагается от его первоначального места, можно использовать LEFT, RIGHT, TOP и BOTTOM.

Заключение

Поиграйте с каждым свойство и его параметрами, чтобы четко понимать их назначение. Пока не попробуешь, не поймешь =)

Следующая статьяПредыдущая статья