Содержание страницы
position cssДля позиционирования элементов при помощи css на страницах html применяют свойство position со значениями: static relative absolute fixed.

Прописав данное правило css, вы можете легко управлять своими элементами на сайте позиционируя их в любом положение.
Разберём подробно каждое значение для параметра position.

Описание значений свойства position:

  • static - это значение по умолчанию и обозначает без позиционирования;
  • relative - указывает, что элемент будет родителем и его потомки ( объекты внутри ) будут располагаться в любой области не выходя за рамки родительского контейнера;
  • absolute - абсолютное позиционирование, где при указании точных координат по высоте и ширине элемент примет нужное положение родительского контейнера;
  • fixed - фиксированное позиционирование, где объект будет зафиксирован по указанным координатам x и y, и примет постоянное местоположение на странице в независимости от вертикальной прокрутки.
Важно!
При использование значений absolute и fixed, необходимо прописывать в правило css эти свойства, то есть указывать точные координаты в пикселях или процентах:

Параметры для координат:

  • top - позиция сверху;
  • bottom - позиция снизу;
  • left - позиция слева;
  • right - позиция справа.

Абсолютное позиционирование элементов посредством css.

Чтобы хорошо понять position css, рекомендую посмотреть видео-урок по обучению html, где наглядно ( 59 минута ) показаны примеры позиционирования элементов с объяснением.

Давайте рассмотрим простые примеры позиционирования в css.

Допустим у нас есть контейнер DIV с классом my_div. И в этом контейнере у нас лежит параграф html и картинка в виде пятиконечной звезды.

Допустим, мы хотим картинку поместить в правый верхний угол родительского контейнера с классом my_div. Для этого, нам нужно сделать следующие записи в html:
html и cssCOPY
<style> .my_div { margin: 10px; padding: 20px; position: relative; } .my_div p { margin: 0; padding: 0; text-align: center; } .my_div img { margin: 0; padding: 0; position: absolute; top: 4px; right: 4px; } </style> <div class="my_div"> <p>Абсолютное позиционирование картинки в родительском контейнере.</p> <img src="zvezda.png" alt="звезда"> </div>

Результат абсолютного позиционирования в css.

Абсолютное позиционирование картинки в родительском контейнере.

маленькая красная звезда
Указав в css родительскому контейнеру position значение relative наша картинка позиционируется в его пределах.

Если бы я этого не сделал, то браузер искал ближайшего родителя со значением relative и отобразил наш элемент ( картинку ) уже в его пределах.
И если такого бы не нашлось, то картинка была бы отображена исходя из указанных для неё координат непосредственно в главном контейнере body.
Закрепление.
При абсолютном позиционировании элементов необходимо указать для них родителя с помощью свойства в css position и значением relative.

Фиксированное позиционирование элементов посредством css.

Примером фиксированного позиционирования у меня на сайте является Меню и Стрелка наверх. И если прокрутить чуток страницу, вы отчётливо увидите эти элементы на странице в фиксированном положение.

Для того, чтобы придать объекту фиксированное позиционирование, необходимо прописать для него в css параметр position со значением fixed, и указать координаты сверху и слева страницы, либо снизу и справа, и задать видимость с помощью z-index со значением выше, чем у всех остальных элементов на странице.
Рассмотрим простой пример с фиксированным позиционированием css простой ссылки ( вместо неё можно прописать всё что угодно ):
html и cssCOPY
<style> .my_ssylka { margin: 0; padding: 0; position: fixed; bottom: 30px; right: 30px; z-index: 999; } </style> <a class="my_ssylka" href="#">НАВЕРХ</a>
В данном примере моя ссылка будет зафиксирована и находиться строго: 30px справа и 30px снизу.
Дата публикации: 21.05.2019
Комментарии
Добавить комментарий
Комментарий не отправлен!
Комментарий успешно отправлен!
После модерации он будет опубликован!
Имя - только русские буквы!
Это обязательное поле!