Hiding a image under the div

2019-09-15 18:41发布

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

4条回答
forever°为你锁心
3楼-- · 2019-09-15 19:25

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

查看更多
beautiful°
4楼-- · 2019-09-15 19:32

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/

查看更多
干净又极端
5楼-- · 2019-09-15 19:46

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;
}
查看更多
登录 后发表回答