Статичный

Fixed Layout

Вся страница и ее элементы имеют фиксированную ширину

.container {
    width: 1200px;
    margin: 0 auto;
}
                        

Резиновый

Fluid Layout

Элементы растягиваются или сжимаются в зависимости от ширины экрана (из-за использования адаптивных единиц измерения)

.container {
    width: 80%;
    margin: 0 auto;
}
                        

Адаптивный

Adaptive Layout

Учитывает разные размеры экранов и подстраивает сайт под них

По сути сайт содержит несколько версий макета

.container {
  width: 1200px;
}

@media (max-width: 1024px) {
  .container {
    width: 90%;
  }
}

@media (max-width: 768px) {
  .container {
    width: 100%;
  }
}
                        

Отзывчивый

Responsive Layout

Сочетает adaptive и fluid подход

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.box {
  width: 30%;
}

@media (max-width: 768px) {
  .box {
    width: 100%;
  }
}
                        

Понятие обтекания

float

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

• float: left; – элемент "плывет" влево, а текст обтекает его справа.
• float: right;

img {
  float: left;
  margin-right: 15px;
  width: 200px;
}
                        

<p><img src="image.jpg" alt="Картинка"> Это текст, который обтекает изображение слева.</p>
                        

Управление обтеканием

Иногда нужно, чтобы после "плавающего" элемента следующий блок располагался ниже, а не сбоку

• clear: left; – запрещает обтекание слева.
• clear: right; – запрещает обтекание справа.
• clear: both; – запрещает обтекание с обеих сторон.

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
                        

Float устарел

сейчас есть более удобные инструменты в виде Flexbox и grid

Позиционирование элементов на странице

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

Static

Статическое позиционирование

По умолчанию все элементы на веб-странице располагаются в потоке документа

.box {
    width: 200px;
    height: 100px;
    background: lightblue;
}
                        

Relative

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

Позволяет смещать элемент относительно его обычного (static) положения, но сам он продолжает занимать место в общем потоке

.box {
  position: relative;
  left: 50px;
  top: 20px;
  background: lightcoral;
}
                        

Для задания координат для вложенных absolute элементов

Absolute

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

Элемент выпадает из потока документа и позиционируется относительно ближайшего родителя с position: relative , absolute или fixed

Если таких родителей нет, он позиционируется относительно body

<div class="container">
    <div class="box">Я в углу блока</div>
</div>
                        

.container {
    position: relative;
    width: 300px;
    height: 200px;
    background: lightgray;
}

.box {
    position: absolute;
    right: 10px;
    bottom: 10px;
    background: lightgreen;
}
                        

Fixed

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

Элемент остается на одном месте при прокрутке страницы

.fixed-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: darkblue;
    color: white;
    padding: 10px;
}
                        

Sticky

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

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

.sticky-header {
    position: sticky;
    top: 0;
    background: orange;
    padding: 10px;
}
                        

Размещение absolute , fixed и sticky элементов

Положением можно управлять с помощью следующих свойств:

Особенности применения

1. С разными свойствами display

Особенности применения

2. Заданы два противоположенных свойства

Если заданы оба противоположных отступа ( left и right ), элемент растянется

<div class="parent">
    <div class="box"></div>
</div>
                        

.parent {
    display: relative;
    width: 1000px;
}

.box {
    display: absolute;
    left: 100px;
    right: 200px;
}
                        

Особенности применения

3. Центрирование элемента

Для центрирования элемента используется логика:

• Отступ на 50% от края родителя
• Отступ обратно на 50% от размера элемента

.box-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.box-center-x {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.box-center-y {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
                        

z-index

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

.popup {
    z-index: 100;
}
                        

Особенности применения z-index

1. Работает только с позиционированными элементами

.box {
    z-index: 10;
}
                                

.box {
    position: relative;
    z-index: 10;
}
                                

2. Если не указан

Браузер будет применять следующий алгоритм рисования слоев (от задника к верху):

1. Фоновые элементы (без position)
2. Блочные элементы
3. Позиционированные элементы (relative, absolute, fixed, sticky)
4. Элементы с z-index (в порядке возрастания)

.box1 {
  position: absolute;
  background: blue;
}

.box2 {
  position: absolute;
  background: red;
}
                            

Контекст наложения

независимая группа элементов, в которой z-index применяется только внутри этой группы

.parent {
  position: relative;
  z-index: 10;
}

.child {
  position: absolute;
  z-index: 999;
}

.other {
  position: absolute;
  z-index: 11;
}
                            

Переполнение контейнера overflow

определяет, как обрабатывается контент, выходящий за границы элемента

.parent {
    width: 100px;
    overflow: visible;
}

.child {
    width: 200px;
}
                        

Значения для overflow

Ограничения по X и Y