2013-11-27 80 views
0

我只是想知道如何使用絕對定位在<p/>之上顯示圖像。注意:圖像沒有定義高度,可以更長或更短。目標是在使用絕對定位之上顯示圖像。使用絕對定位在內容上方顯示圖像

<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> 
+0

以上'

'....什麼是

...您想要在哪裏再次顯示圖像......在'

'之後或者在'

之後'? – NoobEditor

回答

0

我看不到聰明的方式來做到這一點...爲什麼不$(「#wrap」)。之前(「image」);沒有絕對的位置?

+0

就是這樣,我需要它在絕對位置 – ILikebanana

+0

爲什麼?所有其他元素不再與絕對元素進行交互。 – Cracker0dks

0

如果您在隱藏的術語的含義,你去那裏:

標記

<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'})); 

See fiddle

1

如果你想在上面<p><img>,是有一個原因,你不能做以下?

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

我會極力推薦這種方法作爲圖像的高度或寬度不會破壞任何東西和<p>會根據它的大小移動。

但是讓我們假設<img>在其他地方,像它下面:

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

您可以添加以下CSS:

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

這不是一件非常好的事情,雖然 - 如它實際上只是將圖像上移25個像素。如果第<p>段的大小發生了變化怎麼辦?如果您在段落<p>之上添加更多內容,該怎麼辦?

你還可以嘗試:

img { 
    position: fixed; 
    top: 0; 
} 

這將使圖像在視口的頂部在所有的時間。同樣,使用這兩個position方法中的任何一個都會帶來很多問題(除非它是您想要的),並且我建議使用純HTML的第一個建議,並避免使用CSS定位。

相關問題