将图片隐藏在div下

Question

首先看一下这个屏幕截图：

该白色框位于橙色背景上，我希望它完全位于箭头下方。 其余的当然应该是可见的：它应该只是将其隐藏在橙色背景上。

这是橙色背景样式和白色框本身：

橙色背景：

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但没有带来任何结果...

Answer 1

您将无法基于当前的html结构执行此操作。 Z索引仅适用于定位的元素。 即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;
}

Answer 2

使用Z索引 ，您应该完成工作。给橙色背景更高的Z索引

Answer 3

我觉得你看起来像这样

您需要两个div，父div定义相对位置，子div定义绝对属性，并且z-index是必填项。

的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/

Answer 4

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

引用此.. :(（？