隱藏圖像在div

下看看這個screenshoot第一：隱藏圖像在div

enter image description here

這白盒是橙色的背景下，我想這是在它之下完全一樣用箭頭指出。剩下的部分應該是可見的：它應該隱藏在橙色背景上。

這裏是橙色背景風格和白盒本身：

橙色背景：

body { 
    margin: 0; 
    padding: 0; 
    background: url("../img/back.png") repeat-x top #fff; 
    text-align: left; 
    color: #8a5225; 
}

白盒：

#box { 
    background: url("../img/box.png") no-repeat; 
    width: 163px; 
    height: 41px; 
    float: right; 
    position: relative; 
}

希望大家給我一些解決方案。我一直在使用z-index嘗試，但它不會帶來任何結果...

來源

2012-04-01 Cyclone

你可以設置一個[小提琴]（http://jsfiddle.net）？ – PeeHaa 2012-04-01 20:15:49

橙色背景是'back.png'，附加到'body'上？如果是這樣，那不會奏效。您必須將其應用於除body之外的其他元素以獲取其下的某個元素。 – steveax 2012-04-01 20:37:49

這裏是小提琴：http://jsfiddle.net/5bsty/2/，我想'第二個div'在橙色背景下，但是它也可以在'third div'下面。 – Cyclone 2012-04-01 20:58:01

你不會能夠根據你當前的html結構來做到這一點。 Z-index僅適用於定位元素。即relative,absolute或fixed。你將無法將這些應用到body元素。你可以嘗試，但我試過了，但沒有奏效。取而代之的是將橙色背景放入另一個div中，並在其下面繪製較低的一個。

http://jsfiddle.net/5bsty/

<div class="one">First div</div> 
<div class="two">Second div</div> 

div.one { 
    background: #c74d12; 
    z-index: 3; 
    position: relative; 
} 

div.two { 
    position: relative; 
    top: -10px; 
    z-index: 1; 
    background: white; 
}

來源

2012-04-01 20:21:27 mrtsherman

背景是整個頁面，所以你的HTML結構在小提琴中給出是錯誤的，我的結構看起來像這個時刻：http://jsfiddle.net/5bsty/2/，但我仍然希望'second div'放在'first div'下，但不在'third div'下。 – Cyclone 2012-04-01 20:56:53

@Cyclone - 我想我的答案並不清楚。你不能這樣做。我怎樣才能讓孩子在其父母之下？ – mrtsherman 2012-04-02 02:39:03

+1。謝謝，但沒有任何解決方案呢？我只想讓白色的盒子從橙色背景上滑過鼠標... – Cyclone 2012-04-02 08:03:06

使用z-index，你應該做的事..給橙色背景較高的z-index

來源

2012-04-01 20:20:20 Baz1nga

我覺得你這個樣子

你拍二格和家長的div相對與孩子的div定義絕對性能和z指數是強制性的規定位置。

CSS

div.one { 
    background: #c74d12; 
    position: relative; 
    z-index:2; 
} 

div.two { 
    position: absolute; 
    top:11px; 
    background: green; 
    left:0; 
    right:0; 
    z-index:1; 
}

的Html

<div class="one">First div</div> 
<div class="two">Second div</div>

檢查並現場演示http://jsfiddle.net/rohitazad/5bsty/3/

來源

2012-04-02 07:04:42

-2

http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_style_zindex

反駁這個.. :(？

來源

2012-04-02 07:07:39

朋友是使用z-index很複雜：希望它有更好的解決方案;不要以繁瑣的方式編寫代碼。 – 2012-04-02 07:09:06

嗨查詢，發佈答案時，最好不要只鏈接到第三方來源，但提供一些解釋。此外，一羣SO討厭'w3schools'，一旦看到從那裏的鏈接就會倒下。惱人的是。只是一個提示，以避免downvotes！ – mrtsherman 2012-04-02 22:59:52

隱藏圖像在div

回答

相關問題