Что такое позиционирование элементов в css: уроки, примеры и видео
Опубликовано: 01.09.2018
Всем привет! В статье я постараюсь максимально понятно объяснить, что такое позиционирование элементов и блоков в css, для чего это нужно, и как избежать распространенных ошибок. Если вы пока только начинаете разбираться в css, то еще не до конца можете представлять все перспективы свойства position.
Итак, для начала давайте разберем что это такое. Свойство position позволяет управлять расположением элементов на сайте относительно границ экрана, а также относительно других элементов на сайте. Всего есть 6 вариантов использования этого свойства и каждое мы рассмотрим по очереди.
Уроки по CSS/CSS3. Часть 4. Позиционирование элементов
Данная статья будет рассчитана в первую очередь для новичков, которые только начинают изучать данное свойство, и будет иметь подробно описанные примеры и исходный код, чтобы вы могли скопировать и протестировать описанный пример самостоятельно.
CSS Tutorials #12. Свойство Position
Position:absolute – выравниваем элементы относительно экрана
Данное свойство указывает элементы, что он является абсолютно позиционированным и его расположение будет зависеть либо от границ экрана, либо от границ родительского элемента. При этом, остальные элементы и блоки на странице будут выстраиваться так, как будто данного блока на сайте вовсе нет.
Для наглядности того, как работает абсолютное позиционирование в css, создадим несколько блоков разного цвета.
<div class="one"><img src="one.jpg" alt="" /></div> <div class="two"><img src="two.jpg" alt="" /></div> <div class="three"><img src="three.jpg" alt="" /></div>Что мы видим? Три разноцветный блок, расположены друг под другом.
Теперь зададим первому блок position:absolute. Обновляем страницу и видим, что второй блок пропал.
Почему это произошло? Как я уже писал выше, в случае, когда блоку задается абсолютное позиционирование, все элементы, которые расположены ниже него, как бы перестают видеть этот блок, и автоматически смещаются на его место. Кроме того, ширина и высота этого элемента не будет участвовать в формировании размера страницы сайта.
Ну хорошо, но почему тогда пропал именно второй блок, ведь позиционирование мы задали первому блоку? Все дело в том, что все элементы на сайте могут накладываться друг на друга слоями, благодаря такому замечательному свойству как z-index. Он нем скоро будет написана интересная статья, в которой вы сможете также подробно ознакомиться с этим свойством.Как вы думаете, что будет с элементами, если position absolute задать второму блоку? Какие блоки будут видны? Если ваш ответ первый или третий, то вы не угадали. На странице будет виден только второй блок. Можете проверить сами, создав такую же страницу, либо скачав исходники в конце поста.
Обратите внимание, что не видно один из трех, приведенных выше блоков, только в том случае, если они одинакового размера. Если же все блоки будут разного размера, то они могут быть видны за другими.
Положение позиционированного элемента в css можно задавать с помощью свойств:
Left – задает расстояние слева от края родительского блока или от левого края экрана. Right – задает расстояние справа от края родительского блока или от правого края экрана. Top – задает расстояние сверху от края родительского блока или от верхнего края экрана. Bottom – задает расстояние снизу от края родительского блока или от нижнего края экрана.Задаваться эти свойства могут как в пикселях, так и в процентах.
Скрываем блоки с сайта или position absolute -9999px
Довольно простой способ скрыть ненужный контент с сайта, но при этом способ может быть негативно воспринят поисковыми системами, так как фактически информация будет просто скрыта от пользователя, но при этом не убрана с самого сайта.
Так вот, для того, чтобы убрать ненужный блок из видимой области на сайте, задайте ему стиль:
Position:absolute; Left:-9999px;Также вместо left: -9999px, можно задать top: -999px. В первом случае блок уйдет за левую сторону сайта, а во втором – улетит далеко вверх.
Выравниваем позиционированный блок по центру
Я думаю, вы уже могли заметить, что выровнять блок, имеющий абсолютное позиционирование через стандартный margin:0 auto не получится. Но как тогда можно осуществить выравнивание по центру?
.one { position:absolute left: 0; right: 0; width: 300px; margin: 0 auto; }Что у нас получается? Мы задали блоку one фиксированную ширину в 300 пикселей, затем указали ему что он одновременно должен быть прижат к левому краю экрана и к правому. А уже затем использовали выравнивание по центру с помощью margin: 0 auto;
Вот так блок выбудет выглядеть на экране:
Позиционирование относительно других элементов
Во всех описанных выше примерах выравнивание блоков было относительно экрана. Но что делать, если нам нужно выровнять блоки с помощью позиционирования относительно других блоков? Придется изменить немного код. В первую очередь обернем все три блока в один, который станет для них родительским.
<div class="parent"> <div class="one"><img src="one.jpg" alt=""></div> <div class="two"><img src="two.jpg" alt=""></div> <div class="three"><img src="three.jpg" alt=""></div> </div>Для наглядности примера давайте зададим цвета новому элементу, а также тегу body. Сделаем максимальную ширину блока parent в 1000px и выровняем его по центру экрана.
body { padding:0; margin:0; background:#333; line-height:0; } .parent { background:#dedede; width:100%; max-width:1000px; margin:0 auto; }И немного изменим блок one.
.one { position: absolute; right: 0; text-align: center; width: 300px; bottom:0; }Что мы видим?
Цвет нашего сайта стал черным, цвет родительского блока серым, а розовый блок у нас уехал вниз и вправо. Все верно, ведь пока еще данный блок выравнивается относительно экрана. А вот для того, чтобы он встал по в нижний угол родительского блока, а в нашем случае это блок parent, мы должны задать родителю position:relative;
.parent { background:#dedede; width:100%; max-width:1000px; margin:0 auto; position:relative; }Сохраняем, обновляем страницу и видим, что блок номер 1 переместился как раз в то место, куда мы и хотели.
Обратите ваше внимание на то, что данный метод работает только если задано абсолютное позиционирование. В случае, если розовому блоку будет задан position:fixed или relative, результат будет другой.
Фиксируем положение элементов при прокрутке сайта при помощи position fixed
Данное свойство позволяет привязывать элемент к определенному месту на экране. Причем сам элемент продолжает оставаться на своем месте, даже при прокрутке экрана. Довольно часто, fixed используется для фиксированного меню на сайте. Как и absolute fixed позволяет задавать положение по всем 4 сторонам монитора. Для примера, давайте создадим четвертый блок.
<div class="parent"> <div class="one"><img src="one.jpg" alt=""></div> <div class="two"><img src="two.jpg" alt=""></div> <div class="three"><img src="three.jpg" alt=""></div> <div class="four"><img src="four.jpg" alt=""></div> </div>
Теперь сделаем фиксированную привязку четырех блоков по краям нашего экрана.
.one { position:fixed; left:0; top:35%; } .two { position:fixed; top:0; left:35%; } .three { position:fixed; right:0; top:35%; } .four { position:fixed; bottom:0; left:35%; }
Что мы видим? Все блоки встали верно, каждый выровнен относительно экрана по своей стороне. Теперь эти блоки так и будут находиться на экране, независимо от того, будем ли прокручивать экран вниз или нет. Обратите внимание, что блока parent на экране мы не видим, хотя в стилях он остался. Пропал с экрана он из-за того, что fixed блоки не учитываются в формировании высоты и ширины родительского блока. А так как внутри parent больше нет других элементов, его ширина и высота ровняются 0.
Не забывайте, что у фиксированного блока нельзя задать родительский блок, поэтому выровнять position fixed относительно родительского блока с помощью css нельзя.
В одной из статей я расскажу вам как создать фиксированное меню для сайта и выложу его исходники, чтобы вам было удобнее учиться. А пока давайте перейдем к следующему примеру.
Position relative – зачем вообще это нужно?
Данное свойство позволяет располагать элемент относительно других элементов, но работает он не так, как absolute. Если при формировании абсолютного и фиксированного позиционирования размеры элемента в формировании сайта не учитывались, то с relative им приходится считаться. Давайте рассмотрим пример.
Возьмем созданные нами ранее 4 блока и расположим их рядом друг с другом.
<div class="parent"> <div class="one"><img src="one.jpg" alt=""></div> <div class="two"><img src="two.jpg" alt=""></div> <div class="three"><img src="three.jpg" alt=""></div> <div class="four"><img src="four.jpg" alt=""></div> <div class="clr"></div> </div> .one { float:left; } .two { float:left; } .three { float:left; } .four { float:left; } .clr { clear:both; }
Блоки выстроились рядом друг с другом. Зачем я создал новый блок clr? Читайте об этом здесь. Теперь давайте зададим первому блоку position relative и попробуем его сместить его право и вниз.
.one { float: left; position: relative; top: 20px; left: 40px; }Розовый блок опустился вниз и отодвинулся чуть вправо, но при этом, остальные блоки остались на месте.
Таким образом, вы можете смещать элементы относительно друг друга так как вам нужно. А еще у позиционирования есть интересное свойство z-index, которое позволяет накладывать элементы друг на друга. Давайте зададим второму и четвертому блоку z-index:10 и посмотрим, что получится.
Первый блок оказался снизу второго и четвертого. Получается, что данное свойство позволяет управлять элементами и выводить определенные на первое место, а другие, наоборот, прятать.
Ну и напоследок осталось рассмотреть заключительные 2 свойства. Они довольно простые, поэтому рассматривать с примерами их не будем.
Position inherit – задает выбранному элементу точно такое же позиционирование, как у его родителя, т.е. фактически копирует его.
Position static – задается всем элементам на карте автоматически, если не задано иное. При этом, static не позволяет нам менять положение с помощью top, bottom, right и left.
На этом мы заканчиваем свой урок. Если будут вопросы – обязательно задавайте их в комментариях.
Скачать исходники