Перемещаемые элементы, содержимое и перекрытие

Вот еще более интересный вопрос: что происходит, когда перемещаемый элемент перекрывает содержимое в нормальном потоке? Это может произойти, если, например, у перемещаемого элемента отрицательное поле с той стороны, где находится предшествующее содержимое (например, отрицательное поле слева в перемещаемом вправо элементе). Вы уже видели, что происходит с рамками и фоном блочных элементов. А что в строковых элементах? CSS1 и CSS2 не давали точного определения по поводу ожидаемого поведения в подобных случаях. CSS2.1 проясняет этот вопрос, формулируя следующие точные правила:

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

This paragraph, unremarkable in most ways, does contain an inline element.
This inline contains some strongly emphasized text, which is
so marked to make an important point
.


The rest of the element's
content is normal anonymous inline content.



This is a second paragraph. There's nothing remarkable about it, really.
Please move along.


A Heading!



К этой разметке применяем следующие стили:

img.sideline {float: left; margin: 10px -15px 10px 10px;}
p.box {border: 1px solid gray; padding: 0.5em;}
p.box strong {border: 3px double black; background: silver; padding: 2px;}
h2#jump-up {margin-top: -15px; background: silver;}

Строковый элемент (strong) полностью перекрывает перемещаемое изображение: фон, рамку, содержимое и все остальное. У блочных элементов поверх перемещаемого элемента оказывается только содержимое. Их фон и рамки остаются за перемещаемым элементом. Описанное поведение перекрытия не зависит от исходного порядка документа. Неважно, где находится элемент – перед или после перемещаемого элемента, – все равно поведение остается неизменным.

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Блок-контейнер
Блоки-контейнеры и абсолютно позиционированные элементы
Видимость элементов
Задание ширины и высоты
Запрет на обтекание