отображать изображение над содержимым, используя абсолютное позиционирование

Question

отображать изображение над содержимым, используя абсолютное позиционирование

0

Мне просто интересно, как отображать изображение выше  используя абсолютное позиционирование. Примечание: изображение не имеет высоты определения, оно может быть длиннее или короче. Цель состоит в том, чтобы отобразить изображение выше используемого абсолютного позиционирования.

<div id="wrap">
    <p>Hello</p>
</div>

<script>
    //Display an image above the <p/> using absolute positioning.
        //Note: the image has no define height, it could be longer or shorter. The goal is to 
         display the image above the <p/> using absolute positioning.
</script>

ILikebanana 27 нояб. 2013, в 17:24

Источник

0

выше  .... что такое ... где вы хотите снова получить изображение .... после  или после  ???
NoobEditor 27 нояб. 2013, в 15:55

Теги:

javascript

jquery

html

css

3 ответа

Ещё вопросы

выше  .... что такое ... где вы хотите снова получить изображение .... после  или после  ???

skippr · Answer 1 · 2013-11-27T14-51-00.000Z

Если вы хотите <img> выше , есть ли причина, по которой вы не можете сделать следующее?

<div id="wrap">
    <img src="path/to/img">
    <p>Hello</p>
</div>

Я бы очень рекомендовал этот подход, так как высота или ширина изображения ничего не сломают, а  будет двигаться в соответствии с его размером.

Но допустим, что <img> находится в другом месте, например, ниже:

<div id="wrap">
    <p>Hello</p>
    <img src="path/to/img">
</div>

Вы можете добавить следующий CSS:

img {
    position: relative:
    top: -25px;
}

Это не очень хорошая вещь, хотя, поскольку это буквально просто перемещает изображение до 25 пикселей. Что делать, если изменяется размер абзаца ? Что делать, если вы добавляете больше контента над абзацем ?

Вы также можете попробовать:

img {
    position: fixed;
    top: 0;
}

Это приведет к тому, что изображение будет отображаться в верхней части окна просмотра. Опять же, использование любого из этих методов position представляет множество проблем (если только это не то, что вы хотите), и я рекомендую свое первое предложение, используя чистый HTML, и избегая исправлений положения CSS.

Cracker0dks · Answer 2 · 2013-11-27T14-33-00.000Z

0

Я не вижу разумного способа сделать это... почему бы не $ ("# wrap"). Before ("image"); без абсолютного положения?

Cracker0dks 27 нояб. 2013, в 14:33

0

В том-то и дело, мне нужно, чтобы он был в абсолютном положении
ILikebanana 27 нояб. 2013, в 15:54
0

и почему ??? все остальные элементы больше не взаимодействуют с абсолютным элементом.
Cracker0dks 27 нояб. 2013, в 15:57

moonwave99 · Answer 3 · 2013-11-27T13-59-00.000Z

Если вы имеете в виду скрытие, вы идете:

наценка

<div class="wrapper">
  <p>I will be hidden soon.</p>
</div>

CSS

.wrapper img{
  position:absolute;
  top: 0;
}

JS

$('.wrapper').append($('<img>', { src : 'http://placehold.it/350x150'}));

Смотрите скрипку