CODEWITHSUNDEEP
cssvisibility
Cyclone
Cyclone

Reputation: 15269

Hiding a image under the div

Take a look at this screenshoot first:

enter image description here

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...

Upvotes: 0

Views: 16606

Answers (4)

Sreeni Puthiyillam
Sreeni Puthiyillam

Reputation: 485

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

Reffer this..:( ?

Upvotes: -2

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32182

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/

Upvotes: 0

mrtsherman
mrtsherman

Reputation: 39872

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

Upvotes: 3

Baz1nga
Baz1nga

Reputation: 15579

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

Upvotes: 0

Related Questions