Вложенные div с разными background

17.02.2013, 13:50. **Показов** 2619. **Ответов** 3

Author24 — интернет-сервис помощи студентам

Здравствуйте, подскажите пожалуйста решение вот такой проблемы. Есть один блок, #content внутри него есть другой блок #contentBox в 1 блоке в каждом угле есть картинка (ввиде уголка), а во втором блоке(#contentBox) есть свой background. Так вот, background #contentBox перекрывает background #content. А надо, чтобы было наоборот, т.е. background #content перекрывал background #contentBox. z-index не помогает =(.

CSS

#content {
    margin: 0 auto;
    padding: 23px;
    width:1600px;
    height:1000px;
 
    position: relative;
    z-index: 1;
    background: url('../img/content_corner_1.png'), url('../img/content_corner_2.png'), url('../img/content_corner_3.png'), url('../img/content_corner_4.png');
    background-position: left top, right top, right bottom, left bottom;
    background-repeat:no-repeat, no-repeat, no-repeat, no-repeat;
 
}
#contentBox {    
    height: 1000px;
    width: 100%;
    position:relative;
    z-index: 2;   
    background: url('../img/content_top.png'), url('../img/content_left.png'), url('../img/content_bottom.png'), url('../img/content_right.png');
    background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
    background-position: top, right, bottom, left;
}

Вот html:

HTML5

1
2
3

    <div id="content">      
        <div id="contentBox"></div>
    </div>

@newJS · 17.02.2013, 21:13

Сообщение от arsnegov

А надо, чтобы было наоборот, т.е. background #content перекрывал background #contentBox. z-index не помогает

Это невозможно, так как дивы вложены. Зачем вообще фон вложенному диву, если он не нужен?
z-index работает только с элементами имеющими position не равный static

@rodgerfox · 18.02.2013, 04:40

во вложенном диве используйте спаны, и разместите их по углам, дав фон. аминь.

@Valiant · 18.02.2013, 07:09

Сделать первому блоку так

CSS

1 2	background: transparent url('../img/content_corner_1.png'), url('../img/content_corner_2.png'), url('../img/content_corner_3.png'), url('../img/content_corner_4.png'); z-index:3;

и убрать вложение

@newJS 2435 / 1114 / 312 Регистрация: 23.06.2011 Сообщений: 3,525
	17.02.2013, 21:13	2
	Сообщение от arsnegov А надо, чтобы было наоборот, т.е. background #content перекрывал background #contentBox. z-index не помогает Это невозможно, так как дивы вложены. Зачем вообще фон вложенному диву, если он не нужен? z-index работает только с элементами имеющими position не равный static 0

@rodgerfox 4 / 4 / 3 Регистрация: 19.06.2012 Сообщений: 99
	18.02.2013, 04:40	3
	во вложенном диве используйте спаны, и разместите их по углам, дав фон. аминь. 0

	18.02.2013, 07:09