Скрытие изображения под DIV

Question

Взгляните на этот screenshoot первый:

Это белая коробка на оранжевом фоне, я хочу, чтобы это было под ним точно как указано стрелкой. Остальное должно быть видно, конечно: это должно просто скрыть это от того, чтобы быть на оранжевом фоне.

Вот оранжевый стиль фона и сам белая коробка:

Оранжевый фон:

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-index и вы должны сделать .. дать оранжевый фон более высокий Z-индекс

Answer 3

Я думаю, вы посмотрите, как этот

Берут два DIV и родительский DIV определяет позицию по отношению и ребенка DIV определяют абсолютные свойства и г-индекс является обязательным.

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 .. :(?