Как задать координаты текста в html
Перейти к содержимому

Как задать координаты текста в html

  • автор:

Урок 14: Позиционирование элементов

При помощи CSS-позиционирования вы можете разместить элемент точно в нужном месте страницы. Вместе с поплавками (см. Урок 13) позиционирование даёт вам большие возможности для создания точного и навороченного дизайна.

В этом уроке мы обсудим следующее:

  • Принципы CSS-позиционирования
  • Абсолютное позиционирование
  • Относительное позиционирование

Принципы CSS-позиционирования

Представим окно браузера как систему координат:

Принципы CSS-позиционирования — в том, что вы можете расположить бокс в системе координат где угодно.

Скажем, мы хотим позиционировать заголовок. При использовании боксовой модели (см. Урок 9) заголовок выглядит так:

Если мы хотим расположить его на 100px от верхней границы документа и на 200px слева, мы должны ввести следующий код CSS:

Как видите, Позиционирование с помощью CSS — очень точная техника при размещении элементов. Это намного проще, чем использовать таблицы, прозрачные изображения или ещё что-нибудь подобное.

Абсолютное позиционирование

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

Для абсолютного позиционирования элемента свойство position должно иметь значение absolute. Вы можете использовать значения left, right, top и bottom для размещения бокса.

В качестве примера абсолютного позиционирования мы разместим 4 бокса в углах документа:

 #box1 < position:absolute; top: 50px; left: 50px; > #box2 < position:absolute; top: 50px; right: 50px; > #box3 < position:absolute; bottom: 50px; right: 50px; > #box4 < position:absolute; bottom: 50px; left: 50px; > 

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

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

Позиция элемента, размещаемого относительно, обсчитывается относительно его оригинальной позиции в документе. Это означает, что вы смещаете элемент вправо, влево, вверх или вниз. Таким образом, элемент всё ещё занимает в документе пространство после позиционирования.

Как пример относительного позиционирования попробуем разместить три рисунка относительно их оригинального расположения на странице. Обратите внимание, что рисунки оставили после смещения пустое пространство на своих оригинальных позициях в документе:

 #dog1 < position:relative; left: 350px; bottom: 150px; >#dog2 < position:relative; left: 150px; bottom: 500px; >#dog3

Резюме

В последних двух уроках вы научились создавать поплавки и позиционировать элементы. Эти два метода дают вам определённые преимущества при конструировании страниц без необходимости использовать старые методы вроде таблиц и прозрачных изображений в HTML. Вместо них используйте CSS. Это точнее, имеет определённые преимущества и намного проще в работе.

См. также

  • Следующий урок: Наслоение с помощью z-index (Слои)
  • Предыдущий урок: Всплывающие элементы (поплавки)

Позиционирование элементов с помощью JavaScript

CSS отлично справляется с позиционированием элементов, но иногда его не хватает. Учимся выбирать, когда нужен CSS, а когда — JavaScript.

Время чтения: 9 мин

Открыть/закрыть навигацию по статье

  1. Кратко
  2. Когда использовать стили
  3. Когда использовать скрипты
  4. Как менять позиционирование на скриптах
    1. Изменять классы
    2. Изменять style
      1. Изменение margin или top / left / right / bottom
      2. Изменение transform
      3. Изменение кастомных свойств CSS
      1. Саша Беспоясов советует

      Контрибьюторы:

      Обновлено 16 апреля 2024

      Кратко

      Скопировать ссылку «Кратко» Скопировано

      Элементы на странице можно позиционировать не только с помощью стилей, но и с помощью JavaScript. В этой статье мы рассмотрим ситуации, когда это оправдано и как таким позиционированием пользоваться.

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

      Когда использовать стили

      Скопировать ссылку «Когда использовать стили» Скопировано

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

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

      • Это работает в среднем быстрее.
      • Это не собьёт с толку других разработчиков, которые будут читать ваш код.
      • Это разделяет зоны ответственности между скриптами и стилями.

      Когда использовать скрипты

      Скопировать ссылку «Когда использовать скрипты» Скопировано

      Используйте скрипты для позиционирования тогда, когда стилей не хватает.

      CSS ограничен в обратной связи на действия пользователей на экране. В нём есть такие штуки как @keyframes , transition , :hover , :active , :focus и т. д., но этого не всегда достаточно.

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

      Такие случаи — это не просто стилизация документа, а, скорее, смесь из стилизации и программной логики. Чтобы решить такую задачу, нам нужны как инструменты стилизации (CSS), так и инструменты для программирования логики (JavaScript).

      Как менять позиционирование на скриптах

      Скопировать ссылку «Как менять позиционирование на скриптах» Скопировано

      Изменять положение элементов на странице (как и любые стили элементов) можно несколькими способами.

      Изменять классы

      Скопировать ссылку «Изменять классы» Скопировано

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

       .element  /* Стили самого элемента */> .element-initial  /* Стили, определяющие начальное положение элемента на странице */ transform: translateX(0px);> .element-final  /* Стили, определяющие конечное положение */ transform: translateX(50px);> .element  /* Стили самого элемента */ > .element-initial  /* Стили, определяющие начальное положение элемента на странице */ transform: translateX(0px); > .element-final  /* Стили, определяющие конечное положение */ transform: translateX(50px); >      

      Элементу изначально заданы классы element element — initial , которые задают его стили, а также его начальное положение.

      Теперь в ответ на действие пользователя (например, в ответ на клик), поменяем класс элемента, отвечающий за положение. Воспользуемся методом class List . toggle ( ) у элемента, чтобы добавить класс, если его нет на элементе, и убрать, если класс есть:

       // Обрабатываем событие клика на элементеelement.addEventListener('click', () =>  element.classList.toggle('element-final') element.classList.toggle('element-initial')>) // Обрабатываем событие клика на элементе element.addEventListener('click', () =>  element.classList.toggle('element-final') element.classList.toggle('element-initial') >)      

      Тогда получим элемент, который меняет своё положение при клике на него.

      Этот способ изменять стили элемента с помощью скриптов самый простой и чистый — все стили остаются описанными внутри CSS. Однако он не всегда подходит.

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

      Изменять style

      Скопировать ссылку «Изменять style» Скопировано

      Второй способ изменять положение элемента — менять атрибут style с помощью JavaScript.

      При работе со style следует помнить, что у этого атрибута высокая специфичность, из-за чего он будет перебивать основные стили элемента. Его следует использовать с осторожностью.

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

      Для изменения положения через style можно использовать разные свойства.

      Изменение margin или top / left / right / bottom

      Скопировать ссылку «Изменение margin или top / left / right / bottom» Скопировано

      Первое, что приходит на ум — изменение соответствующих CSS-свойств типа margin или left / top / right / bottom .

      Создадим элемент с классом element :

       .element  width: 50px; height: 50px; background: black; position: absolute;> .element  width: 50px; height: 50px; background: black; position: absolute; >      

      Теперь попробуем написать драг-н-дроп для мыши. Сперва создадим ссылку на этот элемент, чтобы обрабатывать события на нём. Переменная dragging будет отвечать за состояние элемента. Если его тащат, то переменная будет со значением true . По умолчанию она false . В переменных start X и start Y будем держать координаты точки, в которой находился элемент, когда мы начали его тащить мышью.

      При событии mousedown , когда на элемент нажимают мышью, мы отмечаем dragging как true — значит, элемент начали тащить. В значения для start X и start Y помещаем положение курсора через свойства события e . page X и e . page Y . Из положения курсора вычитаем отступы элемента, если они есть. Вычитание отступов нужно, чтобы элемент «запоминал» своё последнее положение, иначе мы всегда будем начинать тащить его от начала экрана.

      Далее обрабатываем событие перемещения мыши по . Мы наблюдаем именно за , потому что хотим, чтобы изменения работали на всей странице, а не только внутри элемента element . Если элемент не тащат, ничего не делаем. Если тащат, то высчитываем новое положение, вычитая начальное положение элемента из положения курсора. Когда мы отпускаем мышь, отмечаем dragging как false .

       // Создаём ссылкуconst element = document.querySelector('.element') let dragging = false // Начальные координатыlet startX = 0let startY = 0 // Событие при перетаскивании элементаelement.addEventListener('mousedown', (e) =>  dragging = true startX = e.pageX - Number.parseInt(element.style.left || 0) startY = e.pageY - Number.parseInt(element.style.top || 0)>) // Обрабатываем событие перемещения мыши по document.body.addEventListener('mousemove', (e) =>  // Элемент не перетаскивают if (!dragging) return // Элемент перетаскивают element.style.top = `$px` element.style.left = `$px`>) // Отпускаем мышьdocument.body.addEventListener('mouseup', () =>  dragging = false>) // Создаём ссылку const element = document.querySelector('.element') let dragging = false // Начальные координаты let startX = 0 let startY = 0 // Событие при перетаскивании элемента element.addEventListener('mousedown', (e) =>  dragging = true startX = e.pageX - Number.parseInt(element.style.left || 0) startY = e.pageY - Number.parseInt(element.style.top || 0) >) // Обрабатываем событие перемещения мыши по document.body.addEventListener('mousemove', (e) =>  // Элемент не перетаскивают if (!dragging) return // Элемент перетаскивают element.style.top = `$e.pageY - startY>px` element.style.left = `$e.pageX - startX>px` >) // Отпускаем мышь document.body.addEventListener('mouseup', () =>  dragging = false >)      

      Тогда получится вот такой драг-н-дроп:

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

      Мы можем сделать лучше.

      Изменение transform

      Скопировать ссылку «Изменение transform» Скопировано

      Перепишем наш драг-н-дроп, меняя теперь значение свойства transform .

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

      В этот раз не сможем считать нужные значения напрямую. Вместо этого потребуется вначале вычислить стиль элемента через window . get Computed Style ( ) , а затем узнать значение свойства transform . Мы могли бы просто считать значение style . transform , но это бы не сильно помогло. При обычном считывании мы бы получили нечто вроде matrix ( 1 , 0 , 0 , 1 , 27 , 15 ) . Это матрица афинных преобразований. Её можно представить в виде matrix ( scale X , skew Y , skew X , scale Y , translate X , translate Y ) , где:

      • scale X — масштабирование по горизонтали;
      • scale Y — масштабирование по вертикали;
      • skew X — перекос по горизонтали;
      • skew Y — перекос по вертикали;
      • translate X — смещение по горизонтали;
      • translate Y — смещение по вертикали.

      Но, даже учитывая, что у нас есть все необходимые числа, работать с этим неудобно — это же просто строка. К счастью, можем воспользоваться DOM Matrix Read Only , который преобразует эту матрицу в удобную для использования. После можем воспользоваться свойствами, которые содержат в себе значения translate X и translate Y . Дальше — как раньше, только вычитаем не top и left , а translate X и translate Y . Наконец, добавляем возможность отпустить элемент при отжатии клавиши.

       // . element.addEventListener('mousedown', (e) =>  dragging = true const style = window.getComputedStyle(element) // Преобразуем матрицу const transform = new DOMMatrixReadOnly(style.transform) const translateX = transform.m41 const translateY = transform.m42 startX = e.pageX - translateX startY = e.pageY - translateY>) document.body.addEventListener('mouseup', () =>  dragging = false>) // . element.addEventListener('mousedown', (e) =>  dragging = true const style = window.getComputedStyle(element) // Преобразуем матрицу const transform = new DOMMatrixReadOnly(style.transform) const translateX = transform.m41 const translateY = transform.m42 startX = e.pageX - translateX startY = e.pageY - translateY >) document.body.addEventListener('mouseup', () =>  dragging = false >)      

      А также немного обновим изменение положения. В этот раз можем объединить обновлённые координаты в одну запись translate , которую потом присвоим в качестве значения свойству transform .

       // . document.body.addEventListener('mousemove', (e) =>  if (!dragging) return const x = e.pageX - startX const y = e.pageY - startY element.style.transform = `translate($px, $px)`>) // . document.body.addEventListener('mousemove', (e) =>  if (!dragging) return const x = e.pageX - startX const y = e.pageY - startY element.style.transform = `translate($x>px, $y>px)` >)      

      В итоге получим такой же драг-н-дроп, но работающий на transform .

      Но мы можем ещё лучше ��

      Изменение кастомных свойств CSS

      Скопировать ссылку «Изменение кастомных свойств CSS» Скопировано

      Сейчас код рабочий, но его трудно читать. Как минимум потому, что надо знать, как работает матрица преобразований и DOM Matrix Read Only .

      Мы же можем не менять значение transform вовсе, а вместо этого менять значение CSS-переменных, чтобы обновлять положение элемента!

      Первым делом определяем кастомные свойства CSS в стилях элемента. В переменной — — x будем держать значение координаты по горизонтали, в переменной — — y — по вертикали. Укажем transform , значением которого передадим translate с указанными переменными. В итоге нам не придётся менять сам transform , мы сможем ограничиться лишь изменением значений переменных — — x и — — y .

       .element  width: 50px; height: 50px; background: black; position: absolute; --x: 0px; --y: 0px; transform: translate(var(--x), var(--y));> .element  width: 50px; height: 50px; background: black; position: absolute; --x: 0px; --y: 0px; transform: translate(var(--x), var(--y)); >      

      Теперь подправим скрипт, чтобы сперва считать значение этих переменных:

       // . element.addEventListener('mousedown', (e) =>  dragging = true // Получаем стиль элемента const style = window.getComputedStyle(element) // Считываем значение каждой переменной через getPropertyValue const translateX = parseInt(style.getPropertyValue('--x')) const translateY = parseInt(style.getPropertyValue('--y')) // Остаётся по-старому :–) startX = e.pageX - translateX startY = e.pageY - translateY>) // . element.addEventListener('mousedown', (e) =>  dragging = true // Получаем стиль элемента const style = window.getComputedStyle(element) // Считываем значение каждой переменной через getPropertyValue const translateX = parseInt(style.getPropertyValue('--x')) const translateY = parseInt(style.getPropertyValue('--y')) // Остаётся по-старому :–) startX = e.pageX - translateX startY = e.pageY - translateY >)      

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

       // . document.body.addEventListener('mousemove', (e) =>  if (!dragging) return element.style.setProperty('--x', `$px`) element.style.setProperty('--y', `$px`)>) // . document.body.addEventListener('mousemove', (e) =>  if (!dragging) return element.style.setProperty('--x', `$e.pageX - startX>px`) element.style.setProperty('--y', `$e.pageY - startY>px`) >)      

      В результате получаем такой же драг-н-дроп!

      На практике

      Скопировать ссылку «На практике» Скопировано

      Саша Беспоясов советует

      Скопировать ссылку «Саша Беспоясов советует» Скопировано

      �� Всегда старайтесь стилизовать элементы с помощью CSS-классов. Если анимацию можно сделать с помощью смены классов, описывайте стили в них.

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

      В примере ниже используем Прокрутчик, чтобы таскать блоки мышью и крутить их с инерцией:

      Мы позиционируем элементы с помощью скриптов, потому что не знаем, когда и как пользователь захочет прокрутить ленту с блоками.

      �� Старайтесь анимировать свойства transform и opacity , чтобы сделать сайт или приложение более отзывчивыми.

      2.4. CSS-позиционирование

      CSS рассматривает макет html-документа как дерево элементов. Уникальный элемент, у которого нет родительского элемента, называется корневым элементом. Модуль CSS-позиционирование описывает, как любой из элементов может быть размещен независимо от порядка документа (т.е. извлечен из «потока»).

      В CSS2 каждый элемент в дереве документа генерирует ноль или более блоков в соответствии с блочной моделью. Модуль CSS3 дополняет и расширяет схему позиционирования. Расположение этих блоков регулируется:

      • размерами и типом элемента,
      • схемой позиционирования (нормальный поток, обтекание и абсолютное позиционирование),
      • отношениями между элементами в дереве документа,
      • внешней информацией (например, размер области просмотра, внутренними размерами изображений и т.д.).

      Схемы позиционирования

      • Содержание:
      • 1. Содержащий блок
      • 2. Выбор схемы позиционирования: свойство position
      • 3. Смещение блока: свойства top, right, bottom, left
      • 4. Обтекание: свойство float
      • 5. Управление потоком рядом с плавающими элементами: свойство clear
      • 6. Определение контекста наложения: свойство z-index
      • 6.1. Контекст наложения

      В CSS блок элемента может быть расположен в соответствии с тремя схемами позиционирования:

      Нормальный поток

      Нормальный поток включает блочный контекст форматирования (элементы с display block , list-item или table ), строчный (встроенный) контекст форматирования (элементы с display inline , inline-block или inline-table ), и относительное и «липкое» позиционирование элементов уровня блока и строки.

      Обтекание

      В обтекающей модели блок удаляется из нормального потока и позиционируется влево или вправо. Содержимое обтекает правую сторону элемента с float: left и левую сторону элемента с float: right .

      Абсолютное позиционирование

      В модели абсолютного позиционирования блок полностью удаляется из нормального потока и ему присваивается позиция относительно содержащего блока. Абсолютное позиционирование реализуется с помощью значений position: absolute; и position: fixed; .

      Элементом «вне потока» может быть плавающий, абсолютно позиционированный или корневой элемент.

      1. Содержащий блок

      Положение и размер блока(ов) элемента иногда вычисляются относительно некоторого прямоугольника, называемого содержащим блоком элемента (containing block). В общих словах, содержащий блок — это блок, который содержит другой элемент. В случае нормального потока корневой элемент html является содержащим блоком для элемента body , который, в свою очередь, является содержащим блоком для всех его дочерних элементов и так далее. В случае позиционирования содержащий блок полностью зависит от типа позиционирования. Содержащий блок элемента определяется следующим образом:

      • Содержащий блок, в котором находится корневой элемент, представляет собой прямоугольник — так называемый начальный содержащий блок.
      • Для некорневого элемента с position: static; или position: relative; содержащий блок формируется краем области содержимого ближайшего родительского блока уровня блока, ячейки таблицы или уровня строки.
      • Содержащим блоком элемента с position: fixed; является окно просмотра.
      • Для некорневого элемента с position: absolute; содержащим блоком устанавливается ближайший родительский элемент со значением position: absolute/relative/fixed следующим образом:
        — если предок — элемент уровня блока, содержащим блоком будет область содержимого плюс поля элемента padding ;
        — если предок — элемент уровня строки, содержащим блоком будет область содержимого;
        — если предков нет, то содержащий блок элемента определяется как начальный содержащий блок.
      • Для «липкого» блока содержащим блоком является ближайший предок с прокруткой или окно просмотра, в противном случае.

      2. Выбор схемы позиционирования: свойство position

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

      Свойство не наследуется.

      position
      Значение:
      static Блок располагается в соответствии с нормальным потоком. Свойства top , right , bottom и left не применяются. Значение по умолчанию.
      relative Положение блока рассчитывается в соответствии с нормальным потоком. Затем блок смещается относительно его нормального положения и во всех случаях, включая элементы таблицы, не влияет на положение любых следующих блоков. Тем не менее, такое смещение может привести к перекрытию блоков, а также к появлению полосы прокрутки в случае переполнения.

      Относительно позиционированный блок сохраняет свои размеры, включая разрывы строк и пространство, первоначально зарезервированное для него.

      Относительно позиционированный блок создает новый содержащий блок для абсолютно позиционированных потомков.

      Отступы margin абсолютно позиционированных блоков не схлопываются.

      Абсолютно позиционированный блок создает новый содержащий блок для дочерних элементов нормального потока и потомков с position: absolute; .

      «Липкий» блок может перекрывать другие блоки, а также создавать полосы прокрутки в случае переполнения.

      «Липкий» блок сохраняет свои размеры, включая разрывы строк и пространство, первоначально зарезервированное для него.

      position: static; position: relative; position: absolute; position: sticky; position: fixed; position: initial; position: inherit;

      static-relative-absolute

      3. Смещение блока: свойства top, right, bottom, left

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

      top
      Значение:
      auto Влияние значения зависит от типа элемента. Значение по умолчанию.
      длина Смещение на фиксированном расстоянии от указанного края. Отрицательные значения допускаются.
      % Процентные значения вычисляются относительно высоты содержащего блока. Для «липкого» блока — относительно высоты корневого элемента. Отрицательные значения допускаются.
      initial Устанавливает значение свойства в значение по умолчанию.
      inherit Наследует значение свойства от родительского элемента.
      top: 10px; top: 2em; top: 50%; top: auto; top: inherit; top: initial;

      Свойство top задает расстояние, на которое верхний край абсолютно позиционированного блока (с учетом его margin ) смещается ниже верхнего края содержащего блока. Для относительно позиционированных блоков определяет смещение относительно верхнего края самого блока (то есть блоку задается позиция в нормальном потоке, а затем смещение от этой позиции в соответствии с этим свойством).

      right
      Значение:
      auto Влияние значения зависит от типа элемента. Значение по умолчанию.
      длина Смещение на фиксированном расстоянии от указанного края. Отрицательные значения допускаются.
      % Процентные значения вычисляются относительно ширины содержащего блока. Для «липкого» блока — относительно ширины корневого элемента. Отрицательные значения допускаются.
      initial Устанавливает значение свойства в значение по умолчанию.
      inherit Наследует значение свойства от родительского элемента.
      right: -10px; right: .5em; right: -10%; right: auto; right: inherit; right: initial;

      Свойство right указывает расстояние, на которое правый край абсолютно позиционированного блока (с учетом его margin ) смещен влево от правого края содержащего блока. Для относительно позиционированных блоков определяет смещение относительно правого края самого блока.

      bottom
      Значение:
      auto Влияние значения зависит от типа элемента. Значение по умолчанию.
      длина Смещение на фиксированном расстоянии от указанного края. Отрицательные значения допускаются.
      % Процентные значения вычисляются относительно высоты содержащего блока. Для «липкого» блока — относительно высоты корневого элемента. Отрицательные значения допускаются.
      initial Устанавливает значение свойства в значение по умолчанию.
      inherit Наследует значение свойства от родительского элемента.
      bottom: 50px; bottom: -3em; bottom: -50%; bottom: auto; bottom: inherit; bottom: initial;

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

      left
      Значение:
      auto Влияние значения зависит от типа элемента. Значение по умолчанию.
      длина Смещение на фиксированном расстоянии от указанного края. Отрицательные значения допускаются.
      % Процентные значения вычисляются относительно ширины содержащего блока. Для «липкого» блока — относительно ширины корневого элемента. Отрицательные значения допускаются.
      initial Устанавливает значение свойства в значение по умолчанию.
      inherit Наследует значение свойства от родительского элемента.
      left: 50px; left: 10em; left: 20%; left: auto; left: inherit; left: initial;

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

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

      4. Обтекание: свойство float

      Обтекание позволяет блокам смещаться влево или вправо на текущей строке. «Плавающий блок» смещается влево или вправо до тех пор, пока его внешний край не коснется края содержащего блока или внешнего края другого плавающего блока. Если имеется линейный блок, внешняя верхняя часть плавающего блока выравнивается с верхней частью текущего линейного блока.

      При использовании свойства float для элементов рекомендуется задавать ширину. Тем самым браузер создаст место для другого содержимого. Если для плавающего элемента недостаточно места по горизонтали, он будет смещаться вниз до тех пор, пока не уместится. При этом остальные элементы уровня блока будут его игнорировать, а элементы уровня строки будут смещаться вправо или влево, освобождая для него пространство и обтекая его.

      Правила, регулирующие поведение плавающих боков, описываются свойством float .

      Свойство не наследуется.

      float
      Значение:
      none Отсутствие обтекания. Значение по умолчанию.
      left Элемент перемещается влево, содержимое обтекает плавающий блок по правому краю.
      right Элемент перемещается вправо, содержимое обтекает плавающий блок по левому краю.
      inherit Наследует значение свойства от родительского элемента.
      float: left; float: right; float: none; float: inherit;

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

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

      Свойство автоматически изменяет вычисляемое (отображаемое в браузере) значение свойства display на display: block для следующих значений: inline , inline-block , table-row , table-row-group , table-column , table-column-group , table-cell , table-caption , table-header-group , table-footer-group . Значение inline-table меняет на table .

      Свойство не оказывает влияние на элементы с display: flex и display: inline-flex . Не применяется к абсолютно позиционированным элементам.

      float

      5. Управление потоком рядом с плавающими элементами: свойство clear

      Свойство clear указывает, какие стороны блока/блоков элемента не должны прилегать к плавающим блокам, находящемся выше в исходном документе. В CSS2 и CSS 2.1 свойство применяется только к неплавающим элементам уровня блока.

      Свойство не наследуется.

      clear
      Значение:
      none Означает отсутствие ограничений на положение элемента относительно плавающих блоков. Значение по умолчанию.
      left Смещает элемент вниз относительно нижнего края любого плавающего слева элемента, находящемся выше в исходном документе.
      right Смещает элемент вниз относительно нижнего края любого плавающего справа элемента, находящемся выше в исходном документе.
      both Смещает элемент вниз относительно нижнего края любого плавающего слева и справа элемента, находящемся выше в исходном документе.
      inherit Наследует значение свойства от родительского элемента.
      clear: none; clear: left; clear: right; clear: both; clear: inherit;

      Для предотвращения отображение фона или границ под плавающими элементами используется правило .

      6. Определение контекста наложения: свойство z-index

      В CSS каждый блок имеет позицию в трех измерениях. В дополнение к горизонтальному и вертикальному положению, блоки выкладываются вдоль оси Z друг над другом. Положение вдоль оси Z особенно важно, когда блоки визуально накладываются друг на друга.

      x-y-z-axis

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

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

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

      Свойство не наследуется.

      z-index
      Значение:
      auto Вычисляется в 0 . Если для блока задано position: fixed; или это корневой элемент, значение auto также устанавливает новый контекст наложения. Значение по умолчанию.
      целое число Определяет положение блока в текущем контексте наложения. Также устанавливает новый локальный контекст наложения. Можно использовать любое целое число, включая отрицательные числа. Отрицательные значения помещают элемент вглубь экрана.
      inherit Наследует значение свойства от родительского элемента.
      initial Устанавливает значение свойства в значение по умолчанию.
      z-index: auto; z-index: 0; z-index: 5; z-index: 999; z-index: -1; z-index: inherit; z-index: initial;
      6.1. Контекст наложения

      Если для элементов свойства z-index и position не заданы явно, контекст наложения равен порядку их расположения в исходном коде и браузер отображает элементы на странице в следующем порядке:

      • Корневой элемент , который содержит все элементы веб-странице.
      • Блочные элементы, неплавающие и непозиционированные.
      • Плавающие float непозиционированные элементы в порядке их расположения в исходном коде.
      • Строковые непозиционированные элементы (текст, изображения).
      • Позиционированные position элементы в порядке их следования в исходном коде. Последний из них будет расположен на переднем плане.

      Свойство z-index создает новый контекст наложения. Оно позволяет изменить порядок наложения позиционированных элементов. Элементы будут отображаться на странице в следующем порядке (если для них не заданы свойства, влияющие на контекст наложения — opacity , filter , transform ):

      • Корневой элемент , который содержит все элементы веб-странице.
      • Позиционированные элементы с отрицательным значением z-index .
      • Блочные элементы, неплавающие и непозиционированные.
      • Плавающие float непозиционированные элементы в порядке их расположения в исходном коде.
      • Строковые непозиционированные элементы (текст, изображения).
      • Позиционированные элементы со значениями z-index: 0; и z-index: auto; .

      position

      Свойство CSS position указывает, как элемент позиционируется в документе. top , right , bottom и left определяют конечное местоположение позиционированных элементов.

      Интерактивный пример

      Типы позиционирования

      • Позиционируемый элемент — это элемент, у которого вычисленное значение position является relative , absolute , fixed либо sticky . (Другими словами, это все, кроме static .)
      • Относительно позиционируемый элемент является элементом, вычисленное значение position которого является relative . Свойства top и bottom определяют смещение по вертикали от его нормального положения; свойства left и right задают горизонтальное смещение.
      • Абсолютно позиционируемый элемент — это элемент, чьё вычисленное значение position является absolute или fixed . top , right , bottom и left задают смещения от краёв содержащего блок элемента . (Содержащий блок является предком, относительно которого расположен элемент.) Если элемент имеет поля, они добавляются к смещению. Элемент устанавливает новый контекст форматирования блока (BFC) для своего содержимого.
      • Элемент с липкой позицией — это элемент, у которого значение вычисленного position является sticky . Он рассматривается как относительно позиционированный до тех пор, пока содержащий его блок не пересечёт указанный порог (например, установка top в значение, отличное от auto ) внутри его корня потока (или в контейнере, в котором он прокручивается), после чего он обрабатывается как «застрявший» до тех пор, пока не встретит противоположный край содержащего его блока .

      В большинстве случаев абсолютно позиционированные элементы, которые имеют height и width установленные в auto , имеют размер, соответствующий их содержимому. Тем не менее, незамещаемые, абсолютно позиционированные элементы можно сделать такими, чтобы они заполнили доступное вертикальное пространство, указав как top , так и bottom , и оставляя height неопределённым (то есть , auto ). Ими также можно заполнить доступное горизонтальное пространство, указав как left , так и right , и оставляя width как auto .

      За исключением только что описанного случая (абсолютно позиционированных элементов, заполняющих доступное пространство):

      • Если указаны top и bottom (технически, не auto ) — приоритет будет у top .
      • Если указаны left и right : приоритет будет у left , когда direction ltr (английский язык, горизонтальный японский и т. д.), приоритет будет у right , когда direction является rtl (персидский , Арабский, иврит и т. д.).

      Синтаксис

      Свойство position указывается как одно ключевое слово, выбранное из списка значений ниже.

      Значения

      Это значение позволяет элементу находиться в обычном его состоянии, расположенном на своём месте в документе. Свойства top , right , bottom , left и z-index не применяются к данному элементу. Это значение по умолчанию.

      Элемент позиционируется в соответствии с нормальным потоком документа, а затем смещается относительно себя на основе значений top , right , bottom и left . Смещение не влияет на положение любых других элементов, то есть пространство, выделяемое для элемента в макете страницы, такое же, как если бы позиция была static . Это значение создаёт новый контекст наложения , когда значение z-index не auto . Его влияние на элементы table-*-group , table-row , table-column , table-cell и table-caption не определено.

      Элемент удаляется из обычного потока документа, и для элемента в макете страницы не выделяется дополнительное пространство. Он располагается относительно своего ближайшего спозиционированного предка, если такой есть; в противном случае он помещается относительно исходного содержащего блока . Его конечная позиция определяется значениями top , right , bottom , и left . Это значение создаёт новый контекст наложения , когда значение z-index не auto . Внешние отступы абсолютно спозиционированных блоков не схлопываются с отступами других блоков.

      Элемент выбивается из обычного потока документа, и для элемента в макете страницы не создаётся пространство. Он позиционируется относительно исходного содержащего блока , установленного viewport, за исключением случаев, когда один из его предков имеет свойство transform , perspective , или filter , установленное на что-то иное, кроме none (см. CSS Transforms Spec), и в этом случае этот предок ведёт себя как содержащий блок. (Обратите внимание, что существуют несогласованности браузера с perspective и filter , способствующими содержанию формирования блоков.) Его конечная позиция определяется значениями top , right , bottom и left . Это значение всегда создаёт новый контекст наложения . При печати fixed -элемент помещается в одно и то же место на каждой странице.

      Элемент позиционируется в соответствии с нормальным потоком документа, а затем смещается относительно его ближайшего прокручивающего предка и содержащего блока (ближайший родительский уровень блока), включая элементы, связанные с таблицей, на основе значений top , right , bottom , и left . Смещение не влияет на положение любых других элементов.Это значение всегда создаёт новый контекст наложения . Обратите внимание, что липкий элемент «прилипает» к его ближайшему предшественнику, имеющему «механизм прокрутки» (созданный при overflow равном hidden , scroll , auto или overlay ), даже если тот не является ближайшим фактически прокручивающим предком. Это эффективно препятствует любому «липкому» поведению (см. Github issue on W3C CSSWG).

      Формальный синтаксис

      position =
      static |
      relative |
      absolute |
      sticky |
      fixed |

      =
      running( )

      Примеры

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

      Относительно позиционированные элементы смещены на определённую величину от их обычной позиции в документе, но без смещения, влияющего на другие элементы. В приведённом ниже примере обратите внимание, как размещаются другие элементы, как если бы «Two» занимало пространство своего обычного расположения.

      HTML
      div class="box" id="one">Onediv> div class="box" id="two">Twodiv> div class="box" id="three">Threediv> div class="box" id="four">Fourdiv> 
      CSS
      .box  display: inline-block; width: 100px; height: 100px; background: red; color: white; > #two  position: relative; top: 20px; left: 20px; background: blue; > 

      Абсолютное позиционирование

      Элементы, расположенные относительно друг друга, остаются в нормальном потоке документа. В противоположность этому, элемент с абсолютным позиционированием, выбивается из потока; таким образом, другие элементы располагаются без учёта абсолютных. Абсолютно позиционируемый элемент располагается относительно его ближайшего предка (который не является static ). Если такого предка не существует, то абсолютный элемент позиционируется относительно ICB (начальный содержащий блок — см. также определение W3C), который содержит блок корневого элемента документа.

      h1>Абсолютное позиционированиеh1> p> Я базовый элемент уровня блока. Мои соседи сидят на новых строках ниже меня. p> p class="positioned"> По умолчанию моя ширина 100% ширины родителя и я достиг такого же высокого уровня, как и весь дочерний контент. Наша общая ширина и высота - это наш контент+заполнение+ширина/высота границы. p> p> Мы отделены нашей маржой. Из-за развала края мы отделены шириной одного из наших полей, а не обоих. p> p> встроенные элементы span>как этотspan> и span>вот этотspan> будут сидеть в одной строке друг с другом и соседними текстовыми узлами, если в ней есть место. Переполнение встроенных элементов span >перейдёт на новую строку, если это возможно, - как содержимое этого текстаspan >, или просто перейдёт к новой строке, а если нет, то встанет, как это изображение:img src="long.jpg" /> p> 
      body  width: 500px; margin: 0 auto; > p  background: aqua; border: 3px solid blue; padding: 10px; margin: 10px; > span  background: red; border: 1px solid black; > .positioned  position: absolute; background: yellow; top: 30px; left: 30px; > 

      Фиксированное позиционирование

      Фиксированное позиционирование аналогично абсолютному, за исключением того, что блок, содержащий элемент, является начальным содержащим блоком, установленным в окне просмотра, если только у какого-либо предка не было transform , perspective , или свойства filter , отличное от none (см. CSS Transforms Spec), из-за чего этот предок занимает место элементов, содержащих блок. Это можно использовать для создания «плавающего» элемента, который остаётся в том же положении независимо от прокрутки. В приведённом ниже примере окно c id=»one» фиксируется в 80 пикселях от верхней части страницы и в 10 пикселях слева. Даже после прокрутки оно остаётся в том же месте относительно окна просмотра.

      HTML
      div class="outer"> p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue. Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit. Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi. Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor. Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum. Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus. p> p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue. Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit. Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi. Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor. Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum. Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus. p> p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue. Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit. Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi. Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor. Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum. Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus. p> div class="box" id="one">Onediv> div> 
      CSS
      .box  background: red; width: 100px; height: 100px; margin: 20px; color: white; > #one  position: fixed; top: 80px; left: 10px; > .outer  width: 500px; height: 500px; overflow: scroll; padding-left: 150px; > 

      Липкое позиционирование

      Липкое позиционирование можно рассматривать как гибрид относительного и фиксированного позиционирования. Липкий позиционированный элемент обрабатывается как относительно позиционированный до тех пор, пока он не пересечёт заданный порог, после чего он будет считаться фиксированным, пока не достигнет границы его родителя. Например.

      #one  position: sticky; top: 10px; > 

      . позиционирует элемент с id «one» относительно до тех пор, пока видовой экран не будет прокручен таким образом, чтобы элемент был меньше 10 пикселей от вершины. Помимо этого порога элемент будет зафиксирован на 10 пикселей сверху.

      Типичное использование для липкого позиционирования — для заголовков в алфавитном списке. Заголовок «B» появится чуть ниже элементов, начинающихся с «A», пока они не будут прокручиваться за кадром. Вместо того, чтобы скользить за кадром с остальной частью содержимого, заголовок «B» затем останется фиксированным в верхней части окна просмотра, пока все элементы «B» не будут прокручиваться на экране, и в этот момент он будет закрыт «C», заголовок и т. д.

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

      HTML
      div> dl> dt>Adt> dd>Andrew W.K.dd> dd>Apparatdd> dd>Arcade Firedd> dd>At The Drive-Indd> dd>Aziz Ansaridd> dl> dl> dt>Cdt> dd>Chromeodd> dd>Commondd> dd>Convergedd> dd>Crystal Castlesdd> dd>Cursivedd> dl> dl> dt>Edt> dd>Explosions In The Skydd> dl> dl> dt>Tdt> dd>Ted Leo & The Pharmacistsdd> dd>T-Paindd> dd>Thricedd> dd>TV On The Radiodd> dd>Two Gallantsdd> dl> div> 
      CSS
      *  box-sizing: border-box; > dl  margin: 0; padding: 24px 0 0 0; > dt  background: #b8c1c8; border-bottom: 1px solid #989ea4; border-top: 1px solid #717d85; color: #fff; font: bold 18px/21px Helvetica, Arial, sans-serif; margin: 0; padding: 2px 0 0 12px; position: -webkit-sticky; position: sticky; top: -1px; > dd  font: bold 20px/45px Helvetica, Arial, sans-serif; margin: 0; padding: 0 0 0 12px; white-space: nowrap; > dd + dd  border-top: 1px solid #ccc; > 

      Доступность

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

      • MDN Understanding WCAG, Guideline 1.4 explanations
      • Visual Presentation: Understanding SC 1.4.8 | Understanding WCAG 2.0

      Производительность и доступность

      Элементы прокрутки, содержащие fixed или sticky контент, могут вызвать проблемы с производительностью и доступностью. Когда пользователь прокручивает страницу, браузер должен перерисовать sticky или fixed контент в новом месте. В зависимости от содержимого, которое необходимо перерисовать, производительности браузера и скорости обработки устройства, браузер может не справиться с перерисовкой со скоростью 60 кадров в секунду, что вызывает проблемы с доступностью для людей с чувствительностью и раздражением для всех. Одним из решений является добавление will-change: transform к позиционированным элементам для визуализации элемента на его собственном уровне, повышения скорости перерисовки и, следовательно, повышения производительности и доступности.

      Характеристики

      Specification
      CSS Positioned Layout Module Level 3
      # position-property

      Совместимость с браузерами

      BCD tables only load in the browser

Добавить комментарий

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