Позиционирование Блочные элементы Блочным называется элемент который

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

Блочные элементы Блочным называется элемент, который отображается на веб-странице в виде прямоугольника. Такой элемент занимает всю доступную ширину, высота элемента определяется его содержимым, и он всегда начинается с новой строки. Блочные элементы: <address>, <blockquote>, <div>, <fieldset>, <form>, <h 1>, . . . , <h 6>, <hr>, <ol>, <pre>, <table>, <ul> и некоторые устаревшие.

Свойства • Блоки располагаются по вертикали друг под другом. • Запрещено вставлять блочный элемент внутрь строчного. Например, <a><h 1>Заголовок</h 1></a> не пройдёт валидацию, правильно вложить теги наоборот — <h 1><a>Заголовок</a></h 1>. • По ширине блочные элементы занимают всё допустимое пространство. • Если задана ширина контента (свойство width), то ширина блока складывается из значений width, полей, границ, отступов слева и справа. • Высота блочного элемента вычисляется браузером автоматически, исходя из содержимого блока. • На блочные элементы не действуют свойства, предназначенные для строчных элементов, вроде vertical-align.

Строчные элементы Строчными называются такие элементы документа, которые являются непосредственной частью строки. Строчные элементы: <img>, <span>, <a>, <q>, <code> и др. В основном они используются для изменения вида текста или его логического выделения.

Свойства • Внутрь строчных элементов допустимо помещать текст или другие строчные элементы. Вставлять блочные элементы внутрь строчных запрещено. • Свойства, связанные с размерами (width, height) не применимы. • Ширина равна содержимому плюс значения отступов, полей и границ. • Несколько строчных элементов идущих подряд располагаются на одной строке и переносятся на другую строку при необходимости. • Можно выравнивать по вертикали с помощью свойства vertical-align.

Позиционированием называется положение элемента в системе координат. 4 типа позиционирования: • нормальное, • относительное, • абсолютное, • фиксированное. В зависимости от типа, который устанавливается через свойство position, изменяется и система координат.

Нормальное позиционирование Если для элемента свойство position не задано или его значение static, элемент выводится в потоке документа как обычно. Иными словами, элементы отображаются на странице в том порядке, как они идут в исходном коде HTML.

Относительное позиционирование Если задать значение relative свойства position, то положение элемента устанавливается относительно его исходного места. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения. Применяется редко(замена margin и padding).

Пример

Абсолютное позиционирование При абсолютном позиционировании элемент не существует в потоке документа и его положение задаётся относительно краёв браузера. Задать этот тип можно через значение absolute свойства position.

Пример абсолютного позиционирования

Особенности абс. позиционирования • Ширина слоя, если она не задана явно, равна ширине контента плюс значения полей, границ и отступов. • Свойства left и top имеют более высокий приоритет по сравнению с right и bottom. Если left и right противоречат другу, то значение right игнорируется. То же самое касается и bottom. • Если left задать отрицательное значение, то слой уйдёт за левый край браузера, полосы прокрутки при этом не возникнет. Это один из способов спрятать элемент от просмотра. • Одновременно указанные свойства left и right формируют ширину слоя, но только если width не указано. Стоит добавить свойство width и значение right будет проигнорировано. • Элемент с абсолютным позиционированием перемещается вместе с документом при его прокрутке.

Вложенные слои

Вложенные слои Если для родительского элемента задать relative, а для дочернего absolute, то произойдёт смена системы координат и положение дочернего элемента при этом указывается относительно его родителя

Пример

Фиксированное положение слоя задаётся значением fixed свойства position и по своему действию похоже на абсолютное позиционирование. Но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке вебстраницы.

Пример