Вот еще более интересный вопрос: что происходит, когда перемещаемый элемент перекрывает содержимое в нормальном потоке? Это может произойти, если, например, у перемещаемого элемента отрицательное поле с той стороны, где находится предшествующее содержимое (например, отрицательное поле слева в перемещаемом вправо элементе). Вы уже видели, что происходит с рамками и фоном блочных элементов. А что в строковых элементах? CSS1 и CSS2 не давали точного определения по поводу ожидаемого поведения в подобных случаях. CSS2.1 проясняет этот вопрос, формулируя следующие точные правила:
• Рамки, фон и содержимое строкового блока, пересекающегося с перемещаемым элементом, генерируются поверх перемещаемого элемента.
• Рамки и фон блочного элемента, которые пересекаются с перемещаемым элементом, генерируются под перемещаемым элементом, тогда как его содержимое генерируется поверх перемещаемого элемента. Чтобы проиллюстрировать это правило, рассмотрим следующие ситуацию:
<img src="testy.gif" class="sideline">
<p class="box">
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.
</p>
<p>
This is a second paragraph. There's nothing remarkable about it, really.
Please move along.
</p>
<h2 id="jump-up">A Heading!</h2>
К этой разметке применяем следующие стили:
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) полностью перекрывает перемещаемое изображение: фон, рамку, содержимое и все остальное. У блочных элементов поверх перемещаемого элемента оказывается только содержимое. Их фон и рамки остаются за перемещаемым элементом. Описанное поведение перекрытия не зависит от исходного порядка документа. Неважно, где находится элемент – перед или после перемещаемого элемента, – все равно поведение остается неизменным.