Внимание! На этой странице вы найдете материал урока из архивного курса по CSS. Курс был написан в 2015 и по-прежнему актуален для начинающих веб-разработчиков.
Теоретический материал сохранен в исходном виде, а практические задания с автоматической проверкой вынесены в отдельные роадмапы.
Полный список уроков доступен по тегу Архивный курс по CSS и на странице первого урока.
Введение
Сместить элемент по условным осям координат можно при помощи свойств left, top, right и bottom. Для их использования, необходимо, чтобы элемент был позиционированным, т.е. значение свойства position для него было отлично от static. Что делают эти свойства:
left– отображает расстояние, на которое будет смещен элемент от левого края, в сторону правого.top– отображает расстояние, на которое будет смещен элемент от верхнего края, в сторону нижнего.right– отображает расстояние, на которое будет смещен элемент от правого края, в сторону левого.bottom– отображает расстояние, на которое будет смещен элемент от нижнего края, в сторону верхнего.
В случае если задано отрицательное число, то элемент будет смещаться в противоположную сторону. Далее рассмотрим синтаксис:
left: размер | проценты | auto
top: размер | проценты | auto
right: размер | проценты | auto
bottom: размер | проценты | autoРазмер может быть задан в любых единицах измерения, разрешенных в CSS. Теперь рассмотрим, как влияет значение, заданное в свойстве position.
Если для элемента свойство position задано как absolute
В данном случае родительским элементом является окно браузера, т.е. отсчет начинается от его краев. Если для свойства top задать 10%, то элемент сместится на 10% вниз от окна браузера.
Если для элемента свойство position задано как relative
В таком случае элемент будет смещаться относительно своего исходного положения. Если для свойства right задать 25px, то элемент сместится влево на 25 пикселей, относительного того места, на котором он находился.
Если для элемента свойство position задано как absolute, а для родителя – relative
Теперь элемент будет изменять свое положение относительно родительского блока.
Переходите к следующему уроку курса, а так же не забудьте посмотреть новый материал на Codebra по тегу CSS.
