Как правильно использовать позиционирование в CSS?

Question

В каких случаях используют позиционирование элементов? Сколько бы я не использовал различное позиционирование, у меня в итоге получается каша из элементов либо они в итоге мешают друг другу, либо верстка становится хлипкой. Не всегда получается переместить блок с помощью margin, но позиционирование делает только хуже. В интернете я не нашел информации, которая ответила бы на мой вопрос. Благодарю за внимание.

Answer 1

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

Например в примере ниже.
Если бы у .dropdown не стоял position: absolute, то при открытом дропдауне он бы "отталкивал" другие элементы.

const $dropdown = document.querySelector('.dropdown')

setInterval(() => {
  $dropdown.classList.toggle('opened')
}, 1000)

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

header {
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: black;
}

nav {
  display: flex;
  align-items: center;
  color: white;
}

.nav-item {
  padding: 5px 20px;
  border: 1px solid white;
}

.content {
  background-color: pink;
  min-height: 600px;
  padding: 20px;
}

.currency-select {
  position: relative;
  width: 100px;
}

.currency-select__selected {
  padding: 10px;
  border: 2px solid blue;
  border-radius: 5px;
  background: white;
}

.dropdown {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  border: 2px solid blue;
  border-radius: 5px;
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  transition: max-height 0.3s, opacity 0.3s;
  background: white;
}

.dropdown.opened {
  max-height: 200px;
  opacity: 1;
  pointer-events: auto;
}

.dropdown__item {
  padding: 10px;
  cursor: pointer;
  transition: background 0.3s;
}

.dropdown__item:hover {
  background: silver;
}

.dropdown__item.selected {
  background: dodgerblue;
  color: white;
}

<header>
  <nav>
    <div class="nav-item">Меню 1</div>
    <div class="nav-item">Меню 2</div>
    <div class="nav-item">Меню 3</div>
    <div class="nav-item">Меню 4</div>
  </nav>
  <div class="currency">
    <div class="currency-select" id="currency-two">
      <div class="currency-select__selected">
        UAH
      </div>
      <div class="dropdown opened">
        <div class="dropdown__item selected" value="UAH">UAH</div>
        <div class="dropdown__item" value="GBP">GBP</div>
        <div class="dropdown__item" value="EUR">EUR</div>
        <div class="dropdown__item" value="USD">USD</div>
      </div>
    </div>
    <input type="number" hidden id="amount-two" placeholder="200" />
  </div>
</header>
<div class="content">
  <h1>some content</h1>
</div>

Здесь, как вы можете видеть, благодаря тому, что у .dropdown стоит position: absolute, то всё расположено как нужно

А вот так выглядит если позиционирование указано не было.

const $dropdown = document.querySelector('.dropdown')

setInterval(() => {
  $dropdown.classList.toggle('opened')
}, 1000)

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

header {
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: black;
}

nav {
  display: flex;
  align-items: center;
  color: white;
}

.nav-item {
  padding: 5px 20px;
  border: 1px solid white;
}

.content {
  background-color: pink;
  min-height: 600px;
  padding: 20px;
}

.currency-select {
  position: relative;
  width: 100px;
}

.currency-select__selected {
  padding: 10px;
  border: 2px solid blue;
  border-radius: 5px;
  background: white;
}

.dropdown {
  border: 2px solid blue;
  border-radius: 5px;
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  transition: max-height 0.3s, opacity 0.3s;
  background: white;
}

.dropdown.opened {
  max-height: 200px;
  opacity: 1;
  pointer-events: auto;
}

.dropdown__item {
  padding: 10px;
  cursor: pointer;
  transition: background 0.3s;
}

.dropdown__item:hover {
  background: silver;
}

.dropdown__item.selected {
  background: dodgerblue;
  color: white;
}

<header>
  <nav>
    <div class="nav-item">Меню 1</div>
    <div class="nav-item">Меню 2</div>
    <div class="nav-item">Меню 3</div>
    <div class="nav-item">Меню 4</div>
  </nav>
  <div class="currency">
    <div class="currency-select" id="currency-two">
      <div class="currency-select__selected">
        UAH
      </div>
      <div class="dropdown opened">
        <div class="dropdown__item selected" value="UAH">UAH</div>
        <div class="dropdown__item" value="GBP">GBP</div>
        <div class="dropdown__item" value="EUR">EUR</div>
        <div class="dropdown__item" value="USD">USD</div>
      </div>
    </div>
    <input type="number" hidden id="amount-two" placeholder="200" />
  </div>
</header>
<div class="content">
  <h1>some content</h1>
</div>

Как видите, из-за этого размер хедера стал гораздо больше, и вёрстка "поехала".

Поэтому позиционирование необходимая вещь, которая используется там, где это необходимо.
Когда реализуете дропдаун, или когда хотите "прикрепить элемент к экрану" (position: fixed) чтобы при скролле элемент оставался на месте, а не скроллился вместе с контентом (например хэдер, кнопки, и тд)

БЛОГ НА HUSL

Как правильно использовать позиционирование в CSS?

Ответы (1 шт):