CSSте элементтерди жайгаштыруу варианттары кандай?

CSSте элементтердин жайгашуусунун бир нече негизги варианттары бар:

• static — стандарттык жайгашуу. Элементтер документтин агымында жайгашкан, жылдырбоо менен.
• relative — элемент өзүнүн нормалдуу жайгашуусуна салыштырмалуу жайгашат. Top, left, bottom, right аркылуу жылдырса болот, бирок ал өз ордун сактайт.
• absolute — элемент эң жакынкы static эмес ата-элементке салыштырмалуу жайгашат (же терезеге салыштырмалуу, эгер андайлар жок болсо). Элемент агымдан чыгат.
• fixed — элемент браузер терезесине салыштырмалуу бекитилет жана скроллдоону улантпайт. Ошондой эле, ал агымдан чыгат.
• sticky — элемент scroll учурунда белгиленген жайгашууга жеткенге чейин relative катары жүрөт, андан кийин fixed катары иштейт.

Позициялоодон тышкары, элементтерди жайгаштыруу үчүн көбүнесе колдонулат:

• Flexbox — бир өлчөмдүү (сызык же багыт) элементтердин ортосунда түзүлүш жана бөлүштүрүү үчүн ийкемдүү модель.
• Grid — эки өлчөмдүү тор модел, элементтерди саптар жана багыттар боюнча жайгаштыруу үчүн.
• float — эскирген ыкма, элементтерди айландыруу үчүн колдонулган, азыр азыраак колдонулат.

Position колдонуу мисалы:

.element {
  position: absolute;
  top: 10px;
  left: 20px;
}