Позиционирование

Question 1

top
(верхняя)
bottom
left
right

Answer 1

Свойство top для позиционированного элемента определяет расстояние от верхнего края родительского элемента до верхнего края дочернего элемента. Отсчёт координат зависит от значения свойства position. Если оно равно absolute, в качестве родителя выступает окно браузера и положение элемента определяется от его верхнего края
В случае значения relative, top отсчитывается от верхнего края исходного положения элемента. Если для родительского элемента задано position: relative, то абсолютное позиционирование дочерних элементов определяет их положение от верхнего края родителя

Question 2

z-index

Answer 2

Свойство z-index определяет положение элемента и нижестоящих элементов по оси z. В случае перекрытия элементов, это значение определяет порядок наложения. В общем случае, элементы с большим z-index перекрывают элементы с меньшим.

Question 3

position
(позиция)

Answer 3

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

position: static;
position: relative;
position: absolute;
position: fixed;
position: sticky;

Question 4

float
(плавающий)

Answer 4

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

Когда значение свойства float равно none, элемент выводится на странице как обычно, при этом допускается, что одна строка обтекающего текста может быть на той же линии, что и сам элемент.

float: left;
float: right;
float: none;

Question 5

display
(экран)

Answer 5

Свойство display, которое определяет, как элемент должен быть показан в документе.

/* <display-outside> values */
display: block;
display: inline;
display: run-in;</display-outside>

/* <display-inside> values */
display: flow;
display: flow-root;
display: table;
display: flex;
display: grid;
display: ruby;
display: subgrid;</display-inside>

/* <display-outside> plus <display-inside> values */
display: block flow;
display: inline table;
display: flex run-in;</display-inside></display-outside>

/* <display-listitem> values */
display: list-item;
display: list-item block;
display: list-item inline;
display: list-item flow;
display: list-item flow-root;
display: list-item block flow;
display: list-item block flow-root;
display: flow list-item block;</display-listitem>

/* <display-internal> values */
display: table-row-group;
display: table-header-group;
display: table-footer-group;
display: table-row;
display: table-cell;
display: table-column-group;
display: table-column;
display: table-caption;
display: ruby-base;
display: ruby-text;
display: ruby-base-container;
display: ruby-text-container;</display-internal>

/* <display-box> values */
display: contents;
display: none;</display-box>

/* <display-legacy> values */
display: inline-block;
display: inline-table;
display: inline-flex;
display: inline-grid;</display-legacy>

/* Global values */
display: inherit;
display: initial;
display: unset;

Question 6

clear
(очистить)

Answer 6

Свойство clear устанавливает, с какой стороны элемента запрещено его обтекание другими элементами.

Если задано обтекание элемента с помощью свойства float, то clear отменяет его действие для указанных сторон.

/* Keyword values */
clear: none;
clear: left;
clear: right;
clear: both;
clear: inline-start;
clear: inline-end;

/* Global values */
clear: inherit;
clear: initial;
clear: revert;
clear: revert-layer;
clear: unset;