Что такое относительное положение в CSS? | Kevin Chisholm
С относительным положением CSS элемент по-прежнему влияет на поток документа, но его можно сместить или «подтолкнуть» относительно исходного положения. Визуально элемент будет казаться перемещенным, но его влияние на DOM останется прежним.
Изменение визуального расположения HTML-элемента — обычная задача веб-разработки переднего плана. Задача состоит в том, чтобы выбрать, какой инструмент следует использовать для выполнения этой задачи. Под «инструментом» я подразумеваю, какое свойство CSS лучше всего соответствует результату, который вы надеетесь получить? Теперь, хотя свойство position довольно часто является инструментом для этой задачи, иногда может возникнуть путаница в отношении того, какое свойство CSS position применять. Например, абсолютное похоже на фиксированное.
Но опять же, абсолютное значение иногда путают с относительным из-за возможности применять к набору правил свойства « верхнее », « правое », « нижнее » и « левое ».
Просто имейте в виду, что путаница, связанная с абсолютным и относительным положением, в основном связана с потоком документов. С абсолютной позицией вы удаляете элемент из потока документов, что ни хорошо, ни плохо; это просто большая особенность абсолютной позиции. Итак, если вы чувствуете, что абсолютное положение — это инструмент, который вам нужен, посмотрите СЮДА.
Если вы хотите изменить визуальное расположение элемента, но при этом сохранить его в потоке документа, тогда CSS относительное положение — это то, что вам нужно. Элемент по-прежнему будет иметь точно такой же физический эффект на DOM. Другими словами, другие элементы вокруг него все еще думают, что он находится именно там, где они ожидают его видеть. Но с чисто визуальной точки зрения элемент можно перемещать.
Пример № 1
См.
Основы относительного положения Pen CSS | Front End Video от Front End Video (@frontendvideo) на CodePen.
В примере № 1 у нас есть три вложенных элемента со следующими примененными классами: « дочерний », « родительский » и « прародительский ». С этого момента давайте будем использовать эти имена классов для ссылки на элементы. Каждый элемент имеет определенный набор свойств background-color CSS, чтобы его было легче идентифицировать.
Дочерний элемент имеет свойство CSS position , установленное на: « относительно ». У него также есть свой CSS , топ и 9.0006 оставил свойств, установленных на 100px и 50px . Это говорит браузеру: «Сдвиньте этот элемент на 100 пикселей от сверху и на 50 пикселей от слева от того места, где он обычно должен находиться в потоке документов.
В результате дочерний элемент оказывается сдвинутым вниз на 100 пикселей и сдвинутым вправо на 50 пикселей.
Пример № 2
См. Относительное положение Pen CSS — Промежуточное 2 | Front End Video от Front End Video (@frontendvideo) на CodePen.
В примере № 2 мы добавили пять черных ящиков, которые являются братьями и сестрами дочернего элемента. У них нет относительной позиции, поэтому они появляются именно там, где мы ожидаем, что они будут в потоке документов. Назовем каждый из этих пяти черных ящиков child.black.
Обратите внимание, что хотя наш блок child.green кажется сдвинутым вниз и сдвинутым вправо, блоки child.black не сдвинуты вниз. Может показаться, что так и должно быть, поскольку коробка child.
green должна сталкивать их вниз. Это связано с тем, что использование позиции относительно «подталкивания» элемента оказывает только визуальный эффект на DOM; это не влияет на документооборот. Итак, все 9Ящики 0006 child.black по-прежнему выглядят так, как будто ящик child.green находится именно там, где они ожидают его видеть в DOM. «подталкивание» аспекта использования относительной позиции является чисто визуальным.
Пример № 3
См. Относительное положение Pen CSS — Промежуточное | Front End Video от Front End Video (@frontendvideo) на CodePen.
В примере № 3 мы добавили position: относительный к четвертому блоку child.black с помощью селектора CSS nth-child: . . Эта коробка белая, с фиолетовой каймой. Мы установили смещение на 10 пикселей сверху и на 80 пикселей слева от того места, где оно обычно должно быть в потоке документа. Как и в случае с child.green , « подталкивает » чисто визуально; два блока child.black ниже не затронуты этим и выглядят так, как будто этот белый блок с фиолетовой рамкой все еще находится там, где он должен быть в DOM.
child.black:nth-child(4)
Почему не работает позиция?. Руководство по позициям CSS | Магда Одровонж-Железик | Финк ИТ
Почему элемент находится вверху страницы, когда я хочу, чтобы он был прикреплен к родителю?
Можно ли привязать элемент к родителю?
Элемент находится в DOM, но не виден на странице?
Как центрировать элемент на странице?
Вот несколько вопросов, на которые я наткнулся в сети относительно позиции CSS, которые могут вызвать настоящую головную боль, если вы не потратите 5 минут на то, чтобы правильно их понять.
Я хотел бы рассказать о некоторых основных принципах, чтобы у вас не возникло затруднений в будущем.
Он же «по умолчанию». Элемент позиционируется в соответствии с естественным потоком документа. Ничего особенного. Никакие настройки, такие как слева, сверху и т. д., также не повлияют на это.
Позиция: статическая Что будет работать, так это установка свойств полей и отступов. Хотите центрировать div по горизонтали? margin: auto пригодится.
Относительное положение означает, что элемент расположен относительно своего нормального положения. Звучит бредово, не так ли? Это начинает иметь смысл, когда вы на самом деле начинаете перемещать элемент со свойствами left, top и т. д., как в примере ниже — пунктирная рамка изначально позиционирует div, оранжевый фон — относительный.
Однако обратите внимание, что изменение положения влияет только на этот конкретный элемент (и в большинстве случаев на его дочерние элементы). Это не заставит братьев и сестер двигаться соответственно.
Кроме того, с position: relative исходное пространство, занимаемое перемещенным элементом, будет сохранено в обычном потоке .
Обычно первым звонят, когда приходится бороться с нежелательными интервалами или другими ошибками в макете. Неправильно. Это следует использовать, но когда вы знаете, что делаете. Мол, почти все в CSS.
Абсолютно позиционированный элемент относится к первому родителю в иерархии, который имеет заданную позицию (статическая не учитывается). Это означает, что если у прямого родителя элементов нет заданной позиции, элемент будет привязан к следующему в строке, у которого она есть. Иногда у вас нет позиции, установленной нигде в иерархии, и элемент позиционирует себя в теле.
Абсолютно позиционированный элемент игнорируется родителем. Само по себе. Я могу быть привязан к родителю, да, но на родителя это никак не влияет. Например, пусть взять статические элементы и высоту, подразумеваемую дочерним содержимым :
Родительский элемент растягивается до высоты дочернего элемента Как вы можете видеть, синий дочерний элемент растянулся до высоты своего содержимого, как и его родитель.
Теперь сделаем ребенка абсолютно позиционированным:
Родитель, даже относительный, полностью игнорирует рост ребенка. Абсолютное положение исключает элемент из естественного потока . Все, что у вас осталось, это трюки.
Например, центрирование по горизонтали. margin: auto теперь бесполезен. Что вам нужно сделать, это т.е. установите левое поле на 50% от ширины родителя, а затем сдвиньте его влево на -50% от его собственной ширины.
Это не будет работать с относительным значением ширины элемента. Вы должны объявить его абсолютным (как указано выше, 200 пикселей). Таким образом, плавный, отзывчивый макет подвергается опасности при чрезмерном использовании абсолютного позиционирования . Потребляйте умеренно.
Плавающие жатки! Согласие на использование файлов cookie! Всплывающие окна с новостями!
Фиксированные элементы позиционируются относительно области просмотра окна.
Фиксированные элементы дочерние элементы должны располагаться как обычно, здесь никаких ухищрений не требуется.
Но! Может ли элемент быть зафиксирован по отношению к другому элементу?
Да, может (вроде). Его исходное положение может быть установлено относительно абсолютно позиционированного родителя. Он по-прежнему будет «фиксирован» в области просмотра при прокрутке:
Это мило для заголовков и тому подобного. Я старый, поэтому я не использую его так часто, потому что его поддержка относительно новая и не существует в IE, и мои клиенты всегда будут тестировать IE в какой-то момент 🙂 Вот скриншот поддержки из Могу ли я использовать:
Могу ли я использовать спецификации для sticky После того, как вы установите position:sticky , вам нужно установить момент, когда он должен закрепиться на прокрутке — например, top: 0.
Элемент будет позиционироваться в естественном потоке документ, , но как только он коснется установленного значения, он останется фиксированным .