В этой части учебника рассмотрим позиционирование элементов в CSS, что это такое и какие виды бывают.
Что такое позиционирование в CSS:
Это определяет то как элемент будет позиционироваться относительно другим элементам, например, благодаря этому вы сможете зафиксировать меню на экране или переместит элемент куда вам надо, относительно родительского элемента.
Какие виды позиционирования существуют:
Для начала надо посмотреть какие виды позиционирования элементов существуют в CSS, а точнее, какие значения может принимать свойство position.
- absolute — Позволяет перемешать элемент абсолютно по всему экрану;
- relative — Элемент перемешает относительно его текущей позиции;
- fixed — Фиксирует элемент в определённой области экрана;
- static — Значение по умолчанию, вы не можете перемешать элемент;
Как видите, их совсем не много, всего четыре.
Работа с позиционированием:
Теперь перейдём к работе с позиционированием в CSS, рассмотрим мы только absolute и relative, потому что это самые интересные и сложные свойства, тогда как, с остальными и так всё понятно, fixed просто фиксирует там где вам надо, а static значение по умолчанию, с ним вы не чего ни сможете сделать.
Но перед этим надо рассмотреть свойства для перемещения элементов, всего их четыре.
- top — Назначает расстояние от верхнего края;
- left — Назначает расстояние от левого края;
- bottom — Назначает расстояние от нижнего края;
- right — Назначает расстояние от правого края;
Как видите тут не чего сложного нет.
absolute:
Для наглядности мы сделаем блог absolute, внутри другого блока, вот HTML.
1 2 3 | <div class="green"> <div class="red">Этот блок absolute</div> </div> |
То есть всё просто, вот CSS.
1 2 3 4 5 6 7 8 9 10 11 12 13 | .green { width: 1000px; height: 500px; background-color: green; } .red { padding: 10px; background-color: red; position: absolute; top: 0px; left: 40px; } |
Как видите, я задал размер и позицию, но самое интересное это значение ноль у свойства top, с учётом того что absolute, учитывает позицию с краёв экрана, поэтому блок с классом red должен будит выйти за пределы блока с классом green, вот результат.
Как видите, действительно вышел за пределы блока, как то так всё работает.
relative:
Теперь перейдём к relative, будим использовать тот же HTML и не много изменим CSS, а точнее только поменяем значение свойства position, на relative.
1 2 3 4 5 6 7 8 9 10 11 12 13 | .green { width: 1000px; height: 500px; background-color: green; } .red { padding: 10px; background-color: red; position: relative; top: 0px; left: 40px; } |
То есть всё точно также, только поменялось значение у position, вот результат.
Как видите позиция сверху теперь не выходит за пределы зелёного блока, потому что relative, назначает позицию относительно родительского блока.
Но за то красный блок вышел за пределы с право, потому что он наследует ширину родительского блока, при этом мы меняем позицию от левого края.
Вывод:
В этой части учебника мы рассказали о позиционирование элементов в CSS, и какие свойства вообще нужны для работы с этим.
Подписываетесь на соц-сети:
Оценка:
Загрузка...