z-index圖像在背景元素

回到基礎，我有一種情況，我有一個圖像需要出現在它下面的元素的背景。不過，我不希望圖像出現在該元素，只有元素（和背景屬性）的內容的頂部本身：z-index圖像在背景元素

http://jsfiddle.net/chricholson/4twr5/1/

HTML：

<img src="https://www.google.com/images/srpr/logo3w.png" /> 

<div> 
    <a href="#">Hello World</a> 
</div>

CSS：

img { position: absolute; z-index: 20; } 

div { position: relative; top: 45px; z-index: 10; padding: 30px; background: red; } 

a { position: relative; z-index: 30; padding: 10px; background: yellow; display: block; }

預期行爲將是圖象出現過的DIV背景【檢查】頂部，但隨後出現在黃色鏈接後面，而不是。

來源

2012-08-30 Chris

所以你想讓圖像在hello world元素的背景中？ – insomiac

如果你想在背景中的圖像？其固定在這裏：http：//jsfiddle.net/4twr5/2/ – insomiac

想要圖片上面的hello世界或以下？ –

發現我的「答案」（更多證實我的疑惑）在這裏Can't get z-index to work for div inside of another div。關鍵句子是「一旦你設置了position：相對於test_1，你正在使其z-索引位於不同世界比test_2的z-index」。

這似乎是我有一個問題的原因是因爲一旦我設置了高於div的圖像，無論我設置爲div的內容的z-index值總是被覆蓋。我並不認爲z-indexes是這樣工作的，我認爲所有東西都是「獨立的」，只要價值高於其他地方的價值（無論父容器是什麼），事情就會好起來。

來源

2012-08-30 15:52:01 Chris

img { position: absolute; z-index: 15; } 

div { position: relative; top: 45px; z-index: 20; padding: 30px; background: red; } 

a {z-index: 30; padding: 10px; background: yellow; display: block; }

您可以試試這段代碼。順便說一下是div的孩子。你不需要鍵入position：relative;因爲你寫了div。

來源

2012-08-30 15:20:11

http://jsfiddle.net/4twr5/21/根據本的jsfiddle

更新評論http://jsfiddle.net/4twr5/22/

來源

2012-08-30 15:26:41

根據對原帖的評論，他無法更改HTML，因此他無法將圖像嵌套在div中。 –

@Rrozen冰凍豌豆：正確的:)雖然該小提琴的結果是我希望它最終看起來。 – Chris

@ChrisNicholson檢查現在小提琴 –

把圖像的DIV中，像這樣看：

<div> 
    <img src="https://www.google.com/images/srpr/logo3w.png" /> 
    <a href="#">Hello World</a> 
</div>

來源

2012-08-30 15:27:35 chessweb

根據對原帖的評論，他無法更改HTML，因此他無法將圖像嵌套在div中。 –

這裏大部分都指向了基本事實的答案：在直接HTML + CSS，這可能只有在<img>位於<div>和兄弟<a>內纔可能。

既然你已經表明你不能改變HTML，你可以改爲應用一個簡單的JavaScript來根據需要重新排序DOM：$('div').prepend($('img'));。（順便提一下，這是JQuery。）這樣做需要<img>，並將其作爲<div>中的第一個孩子。

當然，如果你要在生產代碼中使用它，你需要將id附加到元素上，然後選擇它，否則你會將圖像卡在div中。

這是JSFiddle demo。 JQuery被稱爲onDomReady()。 HTML本身沒有改變。

來源

2012-08-30 15:38:04

z-index圖像在背景元素

回答

相關問題