Знакомство с таинственными сочетаниями ароматов позиций CSS

1656558623 znakomstvo s tainstvennymi sochetaniyami aromatov poziczij css

Анабелла Спинелли

1*LLCPNx0V3gV4bhsPgjR0Xw
Фото Дэна Голда на Unsplash

С тех пор как я начал изучать веб-разработку, я обнаружил, что позиционирование CSS является смесью таинственных созависимых свойств, взаимодействие и влияние которых я никогда не понимал. Как и большинство новичков, я просто жонглировал position, display, float, clearи все их возможные комбинации значений пока это не выглядело так, как я хотел.

Вот как работает CSS, не правда ли?

Теперь, после нескольких лет сосредоточенности на тестировании API, я хотел вернуться к старому ванильному CSS и попробовать по-настоящему понять эти основные свойства макета, а я пытаюсь понять, что делают крутые дети в наши дни и вернуться к поезду разработчиков. .

Это моя первая остановка: позиция.

Знакомство со свойствами

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

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

Прежде всего, давайте определим вкус каждого из вариантов позиции:

  • static: это то, что имеет каждый элемент HTML по умолчанию. Это означает, что элемент будет располагаться в соответствии с обычный документооборот. Это в основном соль из них всех.
  • relative: элементы с взаимным расположением могут быть размещены относительно к месту, которое они занимали в обычном документообороте. Они все еще являются частью документооборота, но поддерживают top, right, bottom and left свойства. Любые значения, которые вы назначите этим свойствам, будут рассчитаны с использованием его природного положения и границ в качестве ссылки. Как и добавление перца, это не наносит большого вреда.
  • absolute: это сложно – это как тмин, это может быть очень хорошим дополнением, но вы должны использовать его осторожно. Абсолютными элементами являются извлечено из обычного документооборота. Это означает, что они не влияют на другие элементы страницы и не влияют на них. Однако они будут размещены относительно (да, я знаю, потерпите) до ближайшего positioned предок. Это означает любой родительский элемент, имеющий его позиция очевидно установлена. Его можно точно настроить с помощью top, right, bottom and left. Таким образом, это сродни относительному позиционированию, но поскольку оно больше не является частью документооборота, оно использует родительский элемент в качестве ссылки.
  • fixed: ах, это легко. Фиксированные элементы не являются частью документооборота, а их положение зависит от всего окна, которое иногда называют область просмотра. Кроме того, на них не влияет прокрутка.

Итак, как мы можем их смешать?

Используйте position: relative; всякий раз, когда вы хотите немного сместить элемент от того места, где он обычно был, но вы не хотите, чтобы все остальное двигалось вместе с ним. Помните, что все остальные элементы будут вести себя так, словно он не двигался.

Используйте position: absolute; если вам важно, где находится элемент по отношению к его родительскому или обертке с позицией, в этом примере, relative. Заметьте для этого, что position свойство не каскадируется, поэтому для этого будет использоваться ближайший отец с an явный родственник Декларация. Если вы хотите принудительно каскадировать это свойство, вы можете объявить его как position: inherit;.

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

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

  • Вы можете разместить его куда угодно, и больше ничего не сломается.
  • это также означает, что он не будет делать ничего другого, о чем вы ему явно не приказали, поэтому вам нужно установить его 2 координата, чтобы он вообще отображался.
  • эти 2 координаты (а именно, top или bottomплюс left или right) будет измеряться от края окна.

Есть еще один вариант, который я не рассмотрел: position: sticky. Благодаря этому элементы ведут себя и прокручиваются нормально, но затем остаются на определенной позиции, а остальное содержимое продолжает прокручиваться. Я решил оставить его без внимания, потому что он все еще экспериментальный и превышает его понять основы объем данной статьи. Но, если вам интересно, вот ссылка, показывающая, о чем идет речь.

Надеюсь, вам понравилось прочитанное и вы узнали что-нибудь по дороге. Если у вас есть комментарии или отзывы, я рад их прочитать.

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

Ваш адрес email не будет опубликован.