• Главная
• Видеоуроки
• PHP
• JavaScript
• CSS
• HTML
• Сервисы
• Статьи
• Оффтоп

• Главная
• ->
• Материалы
• ->
• Как работает позиционирование в CSS?

Как работает позиционирование в CSS?

Исходники	Пример

Несомненно, свойство position - один из наиболее мощных инструментов, которым обладают веб-разработчики и дизайнеры. Однако есть в этом свойстве некоторые моменты, которые могут поставить новичков в тупик.

Итак, что же такое позиционирование?

Когда Ваш браузер открывает страницу, он начинает так называемую отрисовку (рендеринг) элементов веб-страницы (блоки div, параграфы, заголовки и т.п.) в том порядке, в котором они появляются в разметке HTML-страницы.

Позиционирование предназначено для того, чтобы упорядочить процесс отображения элементов на странице. Существует 4 типа позиционирования и свойство inherit, предназначенное для обозначения того, что элемент должен наследовать значение родительского элемента:

1. static
2. relative
3. absolute
4. fixed
5. inherit

По умолчанию элементы имеют позиционирование static

По умолчанию ко всем элементам страницы браузер применяет позиционирование static. Такое позиционирование означает, что каждый элемент располагается соответственно естественному порядку - порядку добавления его на страницу.

Блочные элементы располагаются под блочными элементами, строчные элементы располагаются непосредственно друг за другом.

В чем основное отличие между блочными и строчными элементами?

Строчные элементы (inline) по определению не имеют верхнего и нижнего отступа. В общем потоке страницы строчные элементы идут друг за другом, то есть в одной строке. На другую же строку они переходят только тогда, когда доходят до конца строки, либо когда что-то принудительно заставляет их перейти на новую строку.

Блочные элементы (block), в отличие от строчных, в общем потоке страницы располагаются один под другим, по одному в каждой строке.

Относительное позиционирование

Установка свойства position в значение relative сама по себе не производит визуальных изменений на странице. Однако с этих пор мы имеем возможность изменить положение элемента относительно его нормальной позиции, используя свойства top, right, bottom и left.

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

.relativeDiv{

/*сдвигаем блок вверх-влево относительно его нормальной позиции:*/

position:relative;
top:-50px;
left:-100px;
}

Фиксированное позиционирование

При использовании position: fixed расположение элемента рассчитывается относительно окна браузера. Это позволяет, например, отображать какие-нибудь панели, навигационные меню и т.п. всегда в одном и том же месте экрана, в не зависимости от использования прокрутки в браузере. Для позиционирования элемента в этом случае точно также используются свойства top, right, bottom и left.

.fixedDiv{

/*Фиксируем блок div в 20 пикселях от нижней части окна браузера*/

position:fixed;
right:20px;
bottom:20px;
}

Абсолютное позиционирование

Если элемент абсолютно позиционирован, то другие элементы при этом отображаются на веб-странице так, как будто абсолютно позиционированного элемента и нет.

Положение элемента задается уже описанными выше свойствами left, top, right и bottom. Кроме того, на его положение влияет значение свойства position родительского элемента.

Так, если у родителя значение position установлено как static, либо родителя нет, то отсчет координат ведется от края окна браузера.

Если у родителя значение position задано как fixed, relative или absolute, то отсчет координат ведется от края родительского элемента.

.parentDiv{

/* аналогичный эффект будет также при
position: fixed; и position: absolute;*/

position:relative;
}
.absoluteDiv{

/*Позиционируем absoluteDiv относительно родительского parentDiv*/

position:absolute;
right:50px;
top:90px;
}

Используя свойства позиционирования, можно создать любые шаблоны страниц. В сочетании со свойством z-index Вы можете обойти обычное поведение при отображении элементов (по умолчанию элементы, идущие в коде позже, отображаются поверх элементов, шедших ранее).

По материалам tutorialzine.com
Перевод - Дмитрий

P.S. Хотите разобраться с CSS и научиться верстать? Посмотрите еще серию бесплатных видео по резиновой верстке сайта и бесплатный курс по основам адаптивной верстки. Эти материалы помогут вам продвинуться вперед гораздо быстрее:

Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!

Смотрите также:

Наверх