Содержание

CSS-свойство position — журнал «Доктайп»

Чтобы создавать сложные макеты или интерактивные элементы, нужно управлять местоположением элементов на странице относительно других элементов. Для этого есть CSS-свойство position. Оно определяет, где находится элемент на веб-странице.

⭐ Поддержка браузерами свойства position

Значения свойства position

Значения position:

  • static — значение по умолчанию, элемент позиционируется в соответствии с его местом в потоке документа;
  • relative — элемент позиционируется относительно своего исходного положения в потоке документа;
  • absolute — элемент позиционируется относительно ближайшего родительского элемента, который имеет позиционирование, отличное от static;
  • fixed — элемент позиционируется относительно окна браузера;
  • sticky — элемент остаётся на месте при прокрутке страницы, но при этом может быть отодвинут от своей стандартной позиции.

Static

Static является значением по умолчанию для всех элементов и будет отображаться на странице в соответствии с порядком элемента в документе. Это значение используется редко и, как правило, не требует дополнительных параметров.

Пример использования свойства positionсо значением static.

<div>Первый блок</div>
<div>Второй</div>
<div>Третий</div>
<div>Четвёртый</div>

#three {
  position: static;
  background: orange;
}

Relative

Relative определяет позиционирование элемента относительно его стандартного местоположения на странице. При использовании этого значения можно задать дополнительные параметры, такие как top, bottom, left и right, которые указывают на смещение элемента относительно его стандартного местоположения.

Пример использования свойства

 positionсо значением relative.

#two {
  position: relative;
  top: 20px;
  left: 20px;
  background: green;
}

Absolute

Absolute задаёт точное местоположение элемента на странице, независимо от других элементов на странице. При использовании значения можно задать параметры top, bottom, left и right, чтобы определить точное местоположение элемента.

Пример использования свойства positionсо значением absolute

.

#two {
  position: absolute;
  top: 40px;
  left: 20px;
  background: black;
}

Fixed

Fixed задаёт элемент на фиксированном месте на странице, независимо от прокрутки страницы. При использовании этого значения также можно задать параметры top, bottom, left и right, чтобы определить точное местоположение элемента.

Пример использования свойства positionсо значением fixed.

#four {
  position: fixed;
  top: 40px;
  left: 10px;
  background: red;
}

Sticky

Sticky начинает себя вести как обычный элемент до тех пор, пока не достигнет определенной позиции на странице, которую вы зададите с помощью свойства **top, right, bottom или left. Как только элемент достигнет этой позиции при прокрутке страницы, он зафиксируется на месте и будет оставаться там до тех пор, пока пользователь не доскроллит страницу обратно.

Пример использования свойства positionсо значением sticky.

#four {
  position: sticky;
  top: 30px;
  left: 10px;
  background: red;
}

Нюансы использования

  • Если у элемента значение свойства position установлено в absolute или fixed, то такой элемент будет выведен из обычного потока документа и может перекрыть другие элементы. Если это не предполагается, то нужно следить за порядком элементов на странице и настройками z-index.
  • Если у элемента значение свойства position установлено в relative, то это не влияет на позиции других элементов на странице.
  • Значение свойства position может также влиять на поведение других свойств, например, на позиционирование через top, left, bottom и right.
  • Использование свойства position вместе с другими свойствами, например, transform или display, может дать неожиданные результаты и требует более тщательного тестирования на разных браузерах и устройствах.
  • Значение sticky может привести к проблемам с доступностью. Если элемент со значением sticky перекрывает другие элементы на странице, это может затруднить доступ к этим элементам для людей, использующих скринридеры.

Материалы по теме

  • Нестандартное подчёркивание текста на чистом CSS. Свойство text-decoration
  • Когда в вёрстке нужна высота. CSS-свойство height
  • Свойство vertical-align

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Читать дальше

Как верстать и оформлять цитаты

Красиво, просто и оригинально, чтобы текст заметили и запомнили.

CSS

  • 22 июня 2023

Окей, ChatGPT, сделай мне кнопку

История одного разговора

CSS

  • 21 июня 2023

Как использовать свойство object-fit

Как растягивать или сжимать картинки под размеры бокса.

CSS

  • 15 июня 2023

Единицы измерения в CSS: px, rem, em, fr, %

Где и как использовать.

CSS

  • 9 июня 2023

Как создать рамку вокруг элемента. CSS-свойство border

Цветные, точечные, пунктирные рамки и многое другое.

CSS

  • 31 мая 2023

Как сделать анимацию любой сложности.

Свойство animation

Примеры и нюансы использования.

CSS

  • 29 мая 2023

Как создать тени на CSS: свойство box-shadow

Внутренние, внешние, с градиентом — на все случаи жизни.

CSS

  • 28 мая 2023

Как установить стиль шрифта. CSS-свойство font

Семейства шрифтов, начертание и размеры.

CSS

  • 27 мая 2023

Как работает transform в CSS на примерах

Интерактивная статья — попробуйте анимировать сами.

CSS

  • 23 мая 2023

Как оформить текст: 11 главных CSS-свойств

Инструкция для любителей поиграться со шрифтами.

CSS

  • 23 мая 2023

Что такое CSS Position и как его применять

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

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

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

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

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

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



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



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

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



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

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



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

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



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

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

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

HTML

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

<div> </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 значений:

  1. relative;
  2. absolute;
  3. static;
  4. fixed;
  5. sticky.

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

  • Top, Bottom;
  • Left, Right.

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

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



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

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

Relative используется только для

родительских классов.

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



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

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

.box-1{
/* Other codes are here*/
   position: relative;
   left: 100px;
}

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



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

.box-1{
/* Other codes are here*/
   position: absolute;
   left: 100px;
}

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

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

<body>
   <div>
    
       <div> </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;
}

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



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

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 из .box-1 и добавив его в body:

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

Результат:



Обратите внимание, что

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

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

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

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

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

<div>
	
	<p>lorem200</p>
    
	<div> 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;
}

Результат:

via GIPHY

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

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

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

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

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

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

via GIPHY

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

Заключение

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

Свойство кавычек CSS

❮ Предыдущий Полное руководство по CSS Далее ❯


Пример

Укажите кавычки для цитат:

#a {
  кавычки: «‘» «‘»;
}

Попробуйте сами »

Определение и использование

Свойство quotes устанавливает тип кавычек для кавычек.

Показать демо ❯

Значение по умолчанию: не указано
Унаследовано: да
Анимация: нет. Читать о анимированном
Версия: CSS2
Синтаксис JavaScript: объект .style.quotes=»‘\253’ ‘\273′» Попробуй

Поддержка браузера

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

Собственность
котировки 11,0 8,0 1,5 5.1 4,0

Синтаксис CSS

кавычки: нет| строка |начальный|наследовать;

Значения свойств

Значение Описание Демо
нет Указывает, что значения «open-quote» и «close-quote» свойства «content» не будут создавать никаких кавычек Демо ❯
строка строка строка строка Указывает, какие кавычки использовать. Первые два значения определяют первый уровень встраивания котировок, следующие два значения — следующий уровень встраивания котировок и т. д. Демо ❯
начальный Устанавливает для этого свойства значение по умолчанию. Читать про начальный
унаследовать Наследует это свойство от родительского элемента. Читать о унаследовать

Символы кавычек

Результат Описание Номер организации
» двойная кавычка \0022
одинарная кавычка \0027
‹ одинарный, левый угол котировки\2039
› одинарная, под прямым углом котировка\203А
« двойной, левый угол котировки \00АВ
» двойная, прямоугольная котировка \00BB
‘ левая кавычка (одиночная старшая-6)\2018
’ правая кавычка (одиночная старшая-9)\2019
» левая кавычка (двойная высокая-6)\201С
” правая кавычка (двойная высокая-9)\201D
„ двойная кавычка (двойная младшая 9)\201Е

Связанные страницы

Ссылка HTML DOM: свойство кавычек

❮ Предыдущая Полное руководство по CSS Далее ❯

ВЫБОР ЦВЕТА

Лучшие учебники
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3. CSS
Учебное пособие по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

Основные ссылки
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

902 63 лучших примера Примеры HTML
Примеры CSS
Примеры JavaScript
Как сделать Примеры
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

Контекст наложения — CSS: каскадные таблицы стилей

Контекст наложения — это трехмерная концептуализация элементов HTML вдоль воображаемой оси Z относительно пользователя, который, как предполагается, смотрит в окно просмотра или на веб-страницу. HTML-элементы занимают это пространство в порядке приоритета на основе атрибутов элемента.

В предыдущей статье этого руководства «Использование z-индекса» мы показали, что на порядок рендеринга определенных элементов влияет их значение z-индекса . Это происходит из-за того, что эти элементы имеют специальные свойства, которые заставляют их формировать контекст стека .

Контекст стека формируется в любом месте документа любым элементом в следующих сценариях:

  • Корневой элемент документа ( ).
  • Элемент с позицией значение абсолютный или относительный и z-индекс значение, отличное от авто .
  • Элемент с позицией значением фиксированный или фиксированный (фиксированный для всех мобильных браузеров, но не для старых настольных браузеров).
  • Элемент с набором контейнерного типа значение размер или встроенный размер , предназначенный для контейнерных запросов.
  • Элемент, являющийся дочерним элементом гибкого контейнера, со значением z-index , отличным от auto .
  • Элемент, являющийся дочерним элементом Контейнер grid со значением z-index , отличным от auto .
  • Элемент со значением непрозрачности меньше, чем 1 (см. спецификацию непрозрачности).
  • Элемент со значением mix-blend-mode , отличным от normal .
  • Элемент с любым из следующих свойств со значением, отличным от none :
    • преобразование
    • фильтр
    • фоновый фильтр
    • перспектива
    • клип-путь
    • маска / маска-изображение / маска-граница
  • Элемент с изоляцией значение изолировать .
  • Элемент со значением will-change , указывающим любое свойство, которое создаст контекст стека для неначального значения (см. этот пост).
  • Элемент с цифрой содержат значение layout , или paint , или составное значение, включающее любое из них (т.е. содержат: strict , содержат: content ).

В контексте наложения дочерние элементы накладываются друг на друга в соответствии с теми же правилами, что описаны выше. Важно отметить, что значения z-index его дочерних контекстов наложения имеют смысл только в этом родительском. Контексты наложения обрабатываются атомарно как единое целое в родительском контексте наложения.

Вкратце:

  • Контексты наложения могут содержаться в других контекстах наложения и вместе создавать иерархию контекстов наложения.
  • Каждый контекст наложения полностью независим от своих братьев и сестер: при обработке наложения учитываются только элементы-потомки.
  • Каждый контекст наложения является автономным: после того, как содержимое элемента сложено, весь элемент рассматривается в порядке наложения родительского контекста наложения.

Примечание: Иерархия контекстов наложения является подмножеством иерархии элементов HTML, поскольку только определенные элементы создают контексты наложения. Можно сказать, что элементы, которые не создают своих собственных контекстов наложения, ассимилируются родительским контекстом наложения.

В этом примере каждый позиционированный элемент создает свой собственный контекст стека из-за своего позиционирования и значений z-index . Иерархия контекстов наложения организована следующим образом:

  • Корень
    • ОТДЕЛ #1
    • РАЗДЕЛ #2
    • РАЗДЕЛ #3
      • ОТДЕЛ #4
      • ОТДЕЛ № 5
      • ОТДЕЛ № 6

Важно отметить, что DIV № 4, DIV № 5 и DIV № 6 являются дочерними элементами DIV № 3, поэтому размещение этих элементов полностью решается в DIV № 3. Как только наложение и рендеринг в DIV #3 завершены, весь элемент DIV #3 передается для наложения в корневом элементе по отношению к его родственному элементу DIV.

DIV № 4 отображается в DIV № 1, поскольку z-индекс DIV № 1 (5) действителен в контексте стека корневого элемента, а z-индекс DIV № 4 (6) действителен в контексте стека DIV №3. Таким образом, DIV № 4 находится под DIV № 1, потому что DIV № 4 принадлежит DIV № 3, который имеет более низкое значение z-index.

По той же причине DIV № 2 ( z-index : 2) отображается под DIV № 5 ( z-index : 1), потому что DIV № 5 принадлежит DIV № 3, который имеет более высокий z-index ценить.

Z-индекс DIV #3 равен 4, но это значение не зависит от z-индекса DIV #4, DIV #5 и DIV #6, поскольку оно принадлежит другому контексту стека.

Простой способ определить порядок рендеринга сложенных элементов вдоль оси Z состоит в том, чтобы представить его как своего рода «номер версии», где дочерние элементы — это младшие номера версий под номерами основных версий их родителей. Таким образом, мы можем легко увидеть, как элемент с z-индексом 1 (DIV № 5) располагается над элементом с z-индексом 2 (DIV № 2) и как элемент с z-индексом 6 (DIV № 4) располагается под элементом с z-индексом 5 (DIV № 1).

В нашем примере (отсортировано по окончательному порядку рендеринга):

  • Корень
    • РАЗДЕЛ #2: ( z-индекс : 2)
    • DIV #3: ( z-индекс : 4)
      • DIV # 5: ( z-index : 1), размещенный под элементом ( z-index : 4), что приводит к порядку рендеринга 4. 1
      • DIV #6: ( z-index : 3), размещенный под элементом ( z-index : 4), что приводит к порядку рендеринга 4,3
      • DIV #4: ( z-index : 6), размещенный под элементом ( z-index : 4), что приводит к порядку рендеринга 4,6
    • РАЗДЕЛ #1: ( z-индекс : 5)

HTML 

 

   
Элемент разделения №1
 
  <код>
    положение: относительное;

    z-индекс: 5;
  


<дел>
   
Элемент разделения №2
 
  <код>
    положение: относительное;

    z-индекс: 2;
<дел> <дел>

Элемент разделения №4

<код> положение: относительное;
z-индекс: 6;