隐藏图像在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

回答

相关问题