CSS - абсолютная позиция и поток документов

Question

Да, я знаю, что не работает с абсолютным положением, но есть ли способ отобразить элементы «ниже» (после кода), а не за ними?

Пример:

<img src="image.jpg" style="width: 500px; height: 400px; position: absolute; top: 0;" /> 
<h2 style="padding: 15px" >This text is behind not below the image</h2>

Есть ли способ отобразить h2 ниже изображение за исключением , позиционируя его абсолютно тоже?

Пример:

http://jsfiddle.net/fDGHU/1/

(да, у меня есть , чтобы использовать абсолют в моем случае, и содержимое с динамическим полем ниже, и я потерял : D)

Answer 1

Для h2:

укажите верхнее поле, равное высоте вашего изображения.

например.

img {
    position: absolute;
    top: 0;
}

h2 {
    margin-top: 400px;
    padding: 40px;
}

Answer 2

Единственный способ, которым я смог сделать то, что вы просите, это установить свойство top для h2, то есть позиционировать текст после изображения. Fiddle.

PS: position:block не существует.Только absolute, relative, static и fixed.

Answer 3

Как насчет обертывания изображения и заголовка в абсолютном блоке? Это решение помещает заголовок после изображения, потому что h2 является блоком по умолчанию, а ваш контент по-прежнему абсолютно позиционирован.

<style type="text/css">
.wrapper{
    position: absolute;
    top: 0;
}
h2 {
    padding: 40px;
}
</style>

<div class="wrapper">
    <img src="image_url" alt="image!" />
    <h2>Am I invisible? (not!)</h2>
</div>

Answer 4

Просто, просто удалите абсолютную позицию.(проверено) Если объект не определен, он автоматически перейдет вправо от своего соседа или ниже