CSS предоставляет свойства для позиционирования и плавания, которые позволяют создавать столбчатые макеты, перекрывать одну часть макета другой и выполнять задачи, которые в течение многих лет часто требовали использования нескольких таблиц.
Основная идея позиционирования проста: она позволяет вам определить, где должен располагаться блок элемента относительно его обычного положения или относительно родительского элемента, другого элемента или даже самого окна браузера. Очевидно, что эта функция очень мощная и удивительная. Неудивительно, что пользовательские агенты поддерживают позиционирование в CSS2 гораздо лучше, чем другие аспекты.
С другой стороны, плавающие числа впервые были представлены в CSS1 и были основаны на функции, добавленной Netscape на заре Интернета. Плавающее расположение — это не совсем позиционирование, но это, конечно, и не обычный потоковый макет. Мы разъясним значение float в следующей главе.
все в рамке Элемент div, h1 или p часто называют элементом уровня блока. Это означает, что эти элементы отображаются как блок контента, «блок-бокс». Напротив, такие элементы, как span иstrong, называются «встроенными элементами», поскольку их содержимое отображается внутри строки, «встроенного блока».
Вы можете изменить тип создаваемого поля с помощью свойства display. Это означает, что вы можете заставить встроенные элементы (такие как элементы <a>) вести себя как элементы уровня блока, установив для свойства display значение Block. Вы также можете установить для отображения значение none, чтобы сгенерированный элемент вообще не имел поля. Таким образом, поле и все его содержимое больше не будут видны и не займут места в документе.
Но в одном случае элементы уровня блока создаются даже без явного определения. Это происходит, когда вы добавляете текст в начало элемента уровня блока (например, div). Даже если текст не определен как абзац, он будет рассматриваться как таковой:
![div css xhtml xml Пример исходного кода]()
Пример исходного кода
[www.downcodes.com] <дел>
какой-то текст
<p>Еще немного текста.</p>
</div>
В этом случае блок называется безымянным блок-боксом, поскольку он не связан со специально определенным элементом.
То же самое происходит со строками текста для элементов уровня блока. Предположим, у вас есть абзац, содержащий три строки текста. Каждая строка текста образует безымянное поле. Вы не можете напрямую применять стили к безымянным блокам или линейным блокам, поскольку нет места для применения стилей (обратите внимание, что линейные блоки и встроенные блоки — это две разные концепции). Однако полезно понимать, что все, что вы видите на экране, образует некую коробку.
Механизм позиционирования CSS CSS имеет три основных механизма позиционирования: нормальный поток, плавающее и абсолютное позиционирование.
Все коробки располагаются в обычном порядке, если не указано иное. То есть позиция элемента в обычном потоке определяется позицией элемента в X(HTML).
Блоки уровня блока располагаются один за другим сверху вниз, а расстояние по вертикали между блоками рассчитывается на основе вертикальных полей блоков.
Встроенные коробки располагаются горизонтально в ряд. Их интервал можно регулировать с помощью горизонтального заполнения, границ и полей. Однако вертикальные отступы, границы и поля не влияют на высоту встроенного блока. Горизонтальный блок, образованный линией, называется линейным блоком. Высота линейного блока всегда достаточно велика, чтобы вместить все содержащиеся в нем линейные блоки. Однако установка высоты строки может увеличить высоту этого поля.
Ниже мы подробно объясним относительное позиционирование, абсолютное позиционирование и плавающее положение.
CSS-свойство позиции Используя свойство позиции, мы можем выбирать между 4 различными типами позиционирования, которые влияют на то, как создается рамка элемента.
Смысл значения атрибута позиции:
статический
Поле элемента генерируется нормально. Элементы уровня блока создают прямоугольный блок как часть потока документов, а встроенные элементы создают один или несколько линейных блоков, которые размещаются внутри их родительского элемента.
родственник
Поле элемента смещено на определенное расстояние. Элемент сохраняет свою непозиционированную форму и пространство, которое он первоначально занимал.
абсолютный
Поле элемента полностью удаляется из потока документов и позиционируется относительно содержащего его блока. Содержащий блок может быть другим элементом в документе или исходным содержащим блоком. Пространство, ранее занимаемое элементом в обычном потоке документов, закрывается, как если бы элемент не существовал. Элемент генерирует блок уровня блока после позиционирования, независимо от того, какой тип блока он изначально создал в обычном процессе.
зафиксированный
Поле элемента ведет себя так же, как установка абсолютного положения, за исключением того, что содержащий его блок является самим окном просмотра.
Совет: Относительное позиционирование на самом деле считается частью модели позиционирования в обычном потоке, поскольку положение элемента определяется относительно его положения в обычном потоке.
Свойства позиционирования CSS Свойства позиционирования CSS позволяют позиционировать элементы.
Описание недвижимости
Position помещает элемент в статическую, относительную, абсолютную или фиксированную позицию.
top определяет смещение между границей верхнего поля позиционированного элемента и верхней границей содержащего его блока.
right определяет смещение между правым краем поля позиционированного элемента и правым краем содержащего его блока.
дно определяет смещение между нижней границей поля позиционированного элемента и нижней границей содержащего его блока.
left определяет смещение между левым краем поля позиционируемого элемента и левым краем содержащего его блока.
overflow определяет, что происходит, когда содержимое элемента выходит за пределы его области.
clip задает форму элемента. Элемент обрезается в эту фигуру и затем отображается.
вертикальное выравнивание устанавливает вертикальное выравнивание элемента.
z-index устанавливает порядок наложения элементов.
