Как работает CSS Position — объяснение с примерами кода

Рафаил Агазода

для

Рассказываем, как работать с CSS Position и применять его свойства — relative, absolute, static, fixed и sticky — для разработки веб-сайтов.

11К открытий14К показов

Сегодня мы узнаем все, что вам нужно знать о свойстве CSS Position. Объясняем всё на наглядных примерах с кодом.

Это — перевод оригинальной статьи на freeCodeCamp от автора Joy Shaheb.

Ещё у нас есть видеоверсия урока от автора (осторожно, английский язык):

Что такое свойство Position в CSS

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

Используя Flexbox или Grid, вы можете сделать симметричный сайт, к примеру, как этот:

Как работает CSS Position — объяснение с примерами кода 1

Используя свойство Position, вы можете сделать асимметричный сайт, как этот:

Как работает CSS Position — объяснение с примерами кода 2

Дело в том, что с помощью Flexbox и Grid вы не можете разместить содержимое сайта в любом месте. Вы ограничены осями X и Y.

Посмотрите на этот рисунок, чтобы понять, что имеется в виду:

Как работает CSS Position — объяснение с примерами кода 3

Ваши блоки будут соответствовать этим точным размерам и располагаться по сетке.

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

Как работает CSS Position — объяснение с примерами кода 4

Используя Position, вы можете размещать свои блоки где угодно.

Вот еще один пример сайта, который вы можете сделать, используя свойство Position:

Как работает CSS Position — объяснение с примерами кода 5

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

Настройка проекта

Для этого проекта вы можете использовать любой редактор кода, в котором установлен плагин emmet. Я собираюсь использовать CodePen.io.

HTML

Внутри тега body напишите этот код:

			<div class="box-1"> </div>

CSS

Очистите настройки браузера по умолчанию и добавьте этот CSS:

			*{
   margin: 0px;
   padding: 0px;
   box-sizing: border-box;
}

Стилизацию класса box-1 сделаем такой:

			.box-1{
   width: 120px;
   height: 120px;
   background-color: skyblue;
   border: 2px solid black;
}

Свойство position, которое мы будем изучать, имеет 5 значений:

relative;
absolute;
static;
fixed;
sticky.

Чтобы переместить наш блок, мы будем использовать 4 параметра:

Top, Bottom;
Left, Right.

Что такое Static Position в CSS

Static не имеет никакого применения. Static — это значение по умолчанию для каждого блока.

Как работает CSS Position — объяснение с примерами кода 6

Что такое Relative и Absolute Positions в CSS

И Relative, и Absolute работают одинаково, разница между ними заключается только в использовании классов.

Relative используется только для родительских классов.

Absolute используется только для дочерних классов.

Как работает CSS Position — объяснение с примерами кода 7

Давайте рассмотрим два примера, чтобы понять разницу.

Сперва поэкспериментируем с Relative. Напишите этот код:

			.box-1{
/* Other codes are here*/

   position: relative;
   left: 100px;
}

Вот результат, который вы получите:

Как работает CSS Position — объяснение с примерами кода 8

Мы можем повторить тот же результат, используя значение Absolute следующим образом:

			.box-1{
/* Other codes are here*/

   position: absolute;
   left: 100px;
}

В чём же тогда основное различие?

Запишите этот код внутри вашего HTML:

			<body>
   <div class="box-1">
    
       <div class="box-2"> </div>	
        
   </div>
</body>

Стилизуйте поля с помощью этого CSS-кода:

			.box-1{
	width: 300px;
	height: 300px;
	background-color: skyblue;
	border: 2px solid black;
    margin: auto;
}

.box-2{
	width: 100px;
	height:100px;
	background-color: pink;
	border: 2px solid black;
}

Результат должен выглядеть следующим образом:

Как работает CSS Position — объяснение с примерами кода 9

Теперь выделим наши классы:

			body{ }

.box-1{ }

.box-2{ }

А в CSS напишем этот код:

			body{
	
}

.box-1{
/* This is the parent */
	position: relative;
}
.box-2{
/* This is the child */
	position: absolute;
	left: 100px;
}

Обратите внимание, что теперь .box-2 переместился на 100px относительно .box-1.

Это потому, что .box-1 является родительским блоком, а .box-2 – дочерним.

Как работает CSS Position — объяснение с примерами кода 10

Давайте поэкспериментируем ещё немного. Запишите этот код в свой CSS, убрав свойство position из .box-1 и добавив его в body:

			body{
/* This is the parent */
   position: relative;	
}

.box-1{

}
.box-2{
/* This is the child */
   position: absolute;
    left: 100px;
}

Результат:

Как работает CSS Position — объяснение с примерами кода 11

Обратите внимание, что .box-2 переместился на 100px от элемента body.

Это произошло потому, что теперь body является родительским элементом, а .box-2 – дочерним.

Что такое Fixed Position в CSS

Это значение зафиксирует положение вашего элемента на экране даже при прокрутке в браузере. Рассмотрим несколько примеров, чтобы увидеть, как это работает.

Запишите этот код в HTML. Как только вы напишете lorem200, не забудьте нажать клавишу Tab на клавиатуре:

			<div class="container">
	
	<p>lorem200</p>
    
	<div class="box-1"> fixed </div>
    
	<p>lorem200</p>		

</div>

А вот и CSS:

			.container{
	height: 3000px;
}

.box-1{
	height: 120px;
	width: 120px;
	background-color: skyblue;
	border: 2px solid black;
	
	display: grid;
	place-content: center;
}

Затем добавьте этот CSS в нижней части:

			.box-1{

	position: fixed;
	top: 100px;
	left: 200px;
}

Результат:

Видно, что элемент остается неподвижным даже при прокрутке браузера.

Что такое Sticky Position в CSS

После прокрутки до определенной точки на экране это значение зафиксирует положение нашего элемента на экране, чтобы он не двигался.

Не меняйте ничего в ваших текущих HTML и CSS, кроме этого единственного значения:

			.box-1{
/*  Play with  ???? this value */
   position: sticky;
   top: 30px;
   left: 200px;
}

Вот, что должно получиться:

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

Заключение

Теперь вы можете уверенно создавать красивые сайты и решать простые проблемы верстки с помощью свойства position.

11К открытий14К показов

Также рекомендуем

Стилизация участков текста с помощью CSS Custom Highlight API

Стилизация участков текста с помощью CSS Custom Highlight API

В этой статье я расскажу, как с помощью CSS Custom Highlight API можно стилизовать выделенные диапазоны текста, а также разберу теорию на практическом примере.

ТОП-34 курса по Unity 2D и 3D: онлайн-обучение разработчиков игр

ТОП-34 курса по Unity 2D и 3D: онлайн-обучение разработчиков игр

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

70-летняя бабуля изучила программирование и написала игру

70-летняя бабуля изучила программирование и написала игру

70-летняя бабушка изучила программирование и создала свою игру Grandma's Word, о чем сообщил её внук на Reddit. Игра представляет собой головоломку на JavaScript, где нужно угадать слово.

Margin и padding в CSS: как сразу сделать грамотно

Margin и padding в CSS: как сразу сделать грамотно

Разбираемся в ключевых отличиях между этими важнейшими свойствами, а также знакомимся с трюками, чтобы UI / UX вашего сайта стал еще круче и грамотнее.