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

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

Пример:

<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)


css absolute position positioning
person anonymous    schedule 15.02.2011    source источник
comment
Что-то не так с h2 { margin-top: 400px }? Я думаю, что ваш пример может быть немного надуманным; вам нужно дать нам лучшее представление о том, что вы пытаетесь сделать.   -  person thirtydot    schedule 16.02.2011

Ответы (4)


arrow_upward
2
arrow_downward

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

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

person JCOC611    schedule 15.02.2011

arrow_upward
2
arrow_downward

Для h2:

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

eg.

img {
    position: absolute;
    top: 0;
}

h2 {
    margin-top: 400px;
    padding: 40px;
}
person codeinthehole    schedule 15.02.2011

arrow_upward
1
arrow_downward

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

person frontsideup    schedule 16.02.2011

arrow_upward
1
arrow_downward

Как насчет обернуть изображение и заголовок абсолютным блоком? Это решение помещает заголовок после изображения, потому что 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>
person dellamowi_k    schedule 17.06.2013