Hiding a image under the div

问题

Take a look at this screenshoot first:

That white box is ON the orange background, I want it to be under it exactly as pointed with the arrow. The rest should be visible of course: it should just hide this from being on the orange background.

Here is the orange background style and the white box itself:

Orange background:

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

White box:

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

Hope you give me some solutions for that. I've been trying using the z-index but it doesn't bring any results...

回答1:

You won't be able to do this based on your current html structure. Z-index only works for positioned elements. ie relative, absolute or fixed. You won't be able to apply these to the body element. You can try, but I tried and it didn't work. Instead put the orange background into another div and draw the lower one up under it.

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

回答2:

use a z-index and you should be done.. give the orange background a higher z-index

回答3:

I think you look like this

You take two div and parent div define position relative and child div define absolute properties and z-index is compulsory .

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>

Check to live demo http://jsfiddle.net/rohitazad/5bsty/3/

回答4:

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

Reffer this..:( ?

来源：https://stackoverflow.com/questions/9967929/hiding-a-image-under-the-div

标签

css

visibility