Скрытие изображения под 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-индекс работает только для позиционированных элементов.то есть relative, absolute или fixed.Вы не сможете применить их к элементу тела.Вы можете попробовать, но я пытался, и это не сработало.Вместо этого поместите оранжевый фон в другой блок и нарисуйте нижний под ним.

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

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

Запишите это .. :(?

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

используйте z-index , и все должно быть сделано ... дайте оранжевому фону более высокий z-index