隐藏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-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;
}

Answer 2

使用z-index，您应该完成..为橙色背景提供更高的z-index

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

Reffer this .. :(？