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

Position

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

Position: relative

– положение бокса вычисляется относительно позиции, которую блок занимал бы в нормальном потоке.

– для задания смещения используются свойства top | right | bottom | left.

div { position: relative; }
.top { top: 10px; }
.right { right: 10px; }
.bottom { bottom: 10px; }
.left { left: 10px; }
.bottom-right { bottom: 10px; right: 10px; }
.top-left { top: 10px; left: 10px; }

div {position: relative;}
.top { top: -10px; }
.right { right: -10px; }
.bottom { bottom: -10px; }
.left { left: -10px; }
.bottom-right { bottom: -10px; right: -10px; }
.top-left { top: -10px; left: -10px; }

div {
    right: -20px;
    left: -20px;
}

.parent {
    direction: rtl;
}
.rtl,
.ltr {
    right: -20px;
    left: -20px;
}

.box1 {
    top: -20px;
    bottom: -20px;
}
.box2 {
    top: 20px;
    bottom: 20px;
}

.box1 {
    top: 50%;
    left: 50%;
}
.box2 {
    bottom: 50%;
    right: 50%;
}
.wrap { height: 300px; }

Размеры

Содержащий блок

– прямоугольник, относительно которого считаются позиция и размеры бокса элементов.

• Для корневых элементов – это прямоугольник размерами с вьюпорт
• Для элементов position: relative | static – это границы контента ближайшего предка блочного уровня
• Относительно спозиционированный блок создаёт новый содержащий блок

Position

При таком позиционировании блок выводится из потока, при этом сам блок образует новый содержащий блок.

• Содержащим блоком является ближайший предок c position: relative | absolute | fixed
• inline, inline-block, table-... -> block
• У абсолютно спозиционированных элементов не схлапываются внешние отступы

<div class="wrap">
    wrapper
    <div class="box">box1</div>
    <div class="box">box2</div>
</div>

.box {
    position: absolute;
}

Позиционируется относительно первого предка, у которого position ≠ static (содержащий блок). Если такого нет – позиционируется относительно корневого элемента.

.box {
    position: absolute;
    top: 0;
    left: 0
}

Позиционируется относительно первого предка, у которого position ≠ static (содержащий блок). Если такого нет – позиционируется относительно корневого элемента.

.wrap {
    position: relative;
}
.box {
    position: absolute;
    top: 0;
    left: 0
}

.box1 {
    position: absolute;
    right: 0;
    bottom: 0;
}
.box2 {
    position: absolute;
    top: 0;
    left: 0;
}

.box1 {
    position: absolute;
    top: 10px;
    right: 20px;
    bottom: 30px;
    left: 40px;
}

Можно задавать значения в %. Раccчитываются относительно размеров содержащего блока.

.box1 { position: absolute;
    top: 0;
    right: 50%;
    bottom: 50%;
    left: 0;
}
.box2 { position: absolute;
    top: 50%;
    right: 0;
    bottom: 0;
    left: 50%;
}

Размеры

Position

Содержащий блок у fixed элементов – это всегда вьюпорт. Во всех случаях.

<div class="wrapper">
    wrapper
    <div class="fixed">fixed</div>
</div>

.fixed {
    position: fixed;
    width: 50%;
    top: 100px;
    left: 100px;
}

Position

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

<dl>
    <dt>A</dt>
    <dd>Andrew W.K.</dd>
    <dd>Apparat</dd>
</dl>
<dl>
    <dt>B</dt>
    <dd>Battle</dd>
    <dd>...</dd>
</dl>

.dt {
    position: sticky;
    top: 0;
}

Наложения элементов

Z-ось

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

<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>

.box2, .box3 {
    margin-top: -20px;
}

z-index

Каждый элемент может находиться как ниже, так и выше других объектов веб-страницы, их размещением по z-оси и управляет z-index.

.box {
    position: relative; /*absolute | fixed*/
    /*z-index: n; где n ∈ Z | auto*/
    z-index: 1;
}

Но не всё так просто...

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

Элементы с общими родителями, перемещающиеся на передний или задний план вместе, известны как контекст наложения.

Условия создания контекста наложения:

• Если элемент – корневой элемент документа (html)
• Если элемент позиционирован не статически и его значение z-index не равно auto
• Если элемент имеет прозрачность менее 1

Нельзя расположить элемент из одного контекста ноложения между элементами другого контекста

Порядок наложения

<div class="red">red box</div>
<div class="green">green box text!</div>
<div class="blue">blue box</div>

<div class="wrap">
    <div class="red">red</div>
</div>
<div class="green">green</div>
<div class="blue">blue</div>

.red {
    position: relative;
    /*z-index: auto;*/
}

<div class="wrap">
    <div class="red">red</div>
</div>
<div class="green">green</div>
<div class="blue">blue</div>

.red {
    opacity: .99;
}

<div class="wrap">
   <div class="red">red</div>
</div>
<div class="green">green</div>
<div class="blue">blue</div>

.red { position: relative;
    z-index: 0;
}
.green { position: relative;
    z-index: 1;
}

<div class="wrap">
   <div class="red">red</div>
</div>
<div class="green">green</div>
<div class="blue">blue</div>

.red {
    position: relative;
    z-index: 0;
}
.green {
    position: relative;
    z-index: -1;
}

<div class="wrap">
   <div class="red">red</div>
</div>
<div class="green">green</div>
<div class="blue">blue</div>

.wrap { opacity: 0.99; }
.red {
    position: relative;
    z-index: 999;
}
.green {
    position: relative;
    z-index: 0;
}

<div class="red">red</div>
<div class="green">green</div>
<div class="blue">blue</div>

.red {
    position: relative;
    z-index: 999;
}
.green {
    position: relative;
    z-index: -999;
}

z-index hell

Группировка z-index

• 1000–1999 – шапка
• 2000–2999 – диалоговые окна
• 3000–3999 – попапы
• 4000–4999 – suggests

ДЗ 2015

Подсветка строк и колонок в таблице.

td { position: relative; }
td::after {
    position: absolute;
    left: 0;
    top: -5000px;

    width: 100%;
    height: 10000px;

    z-index: -1;

    content: '';
}

Плавающие элементы

Свойство float

.box {
    /*float: left | right | none*/
    float: left;
}

• Элемент вынимается из потока и сдвигается влево (для left) или вправо (для right) до того как коснётся либо границы родителя, либо другого элемента с float
• inline элементы «знают» о float и обтекают элемент по сторонам
• Создают блочный контекст форматирования
• Ширина float блока определяется по содержимому
• Вертикальные отступы margin элементов с float не сливаются с отступами соседей

<div class="wrap">
    <div class="float-left">float-left</div>
    Текст или <span>inline-элементы</span>
    <div class="float-right">float-right</div>
</div>
<div class="wrap">Текст или
    <span>inline-элементы</span>
</div>

.float-left {
    float: left;
}
.float-right {
    float: right;
}

Inline элементы избегают float элементы

<div class="float-left">float-left</div>

<div class="wrap">
    Текст или <span>inline-элементы</span>
</div>

<div class="float-right">float-right</div>

<div class="wrap">Текст или
    <span>inline-элементы</span>
</div>

.float-left {
    float: left;
}
.float-right {
    float: right;
}

Блоки игнорируют float элементы

Отступы не схлапываются

Где 4-ый будет?

Где 4-ый будет?

Где 4-ый будет?

Где 4-ый будет?

Где 4-ый будет?

Cвойство clear

.box {
    /*clear: left | right | both*/
    clear: left;
}

Применение этого свойства сдвигает элемент вниз до тех пор, пока не закончатся float'ы слева/справа/с обеих сторон.

clear: left

.wrapper {
    clear: left;
}

clear: right

.wrapper {
    clear: right;
}

clear: both

.wrapper {
    clear: both;
}

Блочный контекст форматирования

– это регион страницы, в котором блоки размещаются в привычном для блоков порядке. Элементы из разных блочных контекстов форматирования никак не могут повлиять на положение друг друга на странице.

• float элементы
• position: absolute | fixed;
• display: inline-block | table-cell | table-captions (не блочные элементы)
• блочные элементы c overflow: hidden | auto;

.wrapper1 {
    overflow: hidden;
}

.wrapper2 {
    overflow: hidden;
}

<div class="float-left">float: left;</div>
<div class="box">box</div>

.box {
   overflow: hidden;
}

Что будет?

<div class="float-left">
    float: left;
    <div class="float-left">float: left;</div>
</div>

Меняем порядок

<div>b1</div>
<div>b2</div>
<div>b3</div>
<div>b4</div>

div { float: right }

Трехколоночный макет

<div class="left">left</div>
<div class="right">right</div>
<div class="center">center</div>

.left { float: left }
.right { float: right }
.center { overflow: hidden }
body { width: 50% }

Спасибо

ДЗ