Расположение потомка позади предка

[Titansword]

Можно ли расположить элемент-потомок позади родительского элемента? С z-index ковырялся, но не вышло.

[amelice]

Можно ли расположить элемент-потомок позади родительского элемента? С z-index ковырялся, но не вышло.

приведите код?

[Titansword]

<div id="grey_box">

	<div id="blue_box"></div>

</div>

#grey_box {
width: 200px;
height: 200px;
border: solid 1px #ccc;
background: #ddd;
position: relative ;
z-index: 2;
}

#blue_box {
width: 100px;
height: 100px;
border: solid 1px #4a7497;
background: #8daac3;
position: relative;
z-index: 1;
}

[ctpz]

http://htmlbook.ru/css/z-index

Чем выше z-index тем выше будет находится блок.

В вашем случае

#grey_box {
width: 200px;
height: 200px;
border: solid 1px #ccc;
background: #ddd;
position: relative ;
z-index: 1;
}

#blue_box {
width: 100px;
height: 100px;
border: solid 1px #4a7497;
background: #8daac3;
position: relative;
z-index: 2;
}

[Softlink]

#grey_box {
width: 200px;
height: 200px;
border: solid 1px #ccc;
background: #ddd;
position: relative ;
}

#blue_box {
width: 100px;
height: 100px;
border: solid 1px #4a7497;
background: #8daac3;
position: relative;
z-index: -1;
}

[amelice]

#grey_box {
width: 200px;
height: 200px;
border: solid 1px #ccc;
background: #ddd;
position: relative ;
}

#blue_box {
width: 100px;
height: 100px;
border: solid 1px #4a7497;
background: #8daac3;
position: relative;
z-index: -1;
}

Softlink, если применить #grey_box к body, a #blue_box к блоку, то фон блока не будет перекрыт фоном боди. Это объясняется в книге Мейера, но я не поняла. А как ты понимаешь?

[Softlink]

Softlink, если применить #grey_box к body, a #blue_box к блоку, то фон блока не будет перекрыт фоном боди. Это объясняется в книге Мейера, но я не поняла. А как ты понимаешь?

Я ни разу не читал Мейера. Может это плохо, но я всегда до всего дохожу эмпирическим путем. Попутно можно получить много интересной и/или полезной информации. В общем теоретик из меня никакой

А если подумать, то наверное нельзя элемент спрятать полностью "за сайт". Т.е. боди - это сайт, "за ним" ничего не должно быть и поэтому не бывает. Я так думаю. Может кто еще что подскажет.

[troll]

если применить #grey_box к body, a #blue_box к блоку, то фон блока не будет перекрыт фоном боди. Это объясняется в книге Мейера, но я не поняла. А как ты понимаешь?

Можно я отвечу?) Я понимаю это так: background для body устанавливает background для canvas (спецификация: background), а canvas отображается "ниже" элементов с любыми z-index (спецификация: порядок отрисовки). В общем, по сути, примерно тоже самое, о чем говорил Softlink)

Edited August 3, 2011 by troll

[amelice]

Softlink, troll спасибо вам за ответ!

Я так понимаю, что позади фона боди только может быть фон элемента html.

По теме z-index в книге Мейера приведен пример, он у меня не работает. То есть элементы с отрицательным z-index должны перекрываться родителями, они у меня не перекрываются. а z-index распространяется только на родителей.

вот ссылка

Возможно где-то допустила ошибку, но в упор не вижу .

[psywalker]

Softlink, troll спасибо вам за ответ!

Я так понимаю, что позади фона боди только может быть фон элемента html.

По теме z-index в книге Мейера приведен пример, он у меня не работает. То есть элементы с отрицательным z-index должны перекрываться родителями, они у меня не перекрываются. а z-index распространяется только на родителей.

вот ссылка

Возможно где-то допустила ошибку, но в упор не вижу .

Убери z-index: у родителя.

[amelice]

Softlink, troll спасибо вам за ответ!

Я так понимаю, что позади фона боди только может быть фон элемента html.

По теме z-index в книге Мейера приведен пример, он у меня не работает. То есть элементы с отрицательным z-index должны перекрываться родителями, они у меня не перекрываются. а z-index распространяется только на родителей.

вот ссылка

Возможно где-то допустила ошибку, но в упор не вижу .

Убери z-index: у родителя.

Убрала, работает в контексте одного блока родителя. А если мне нужно управлять перекрыванием родителей? И еще почему так не работало?

[troll]

Я так понимаю, что позади фона боди только может быть фон элемента html.

Это не совсем верно: позади фона body может быть что угодно, а вот позади фона canvas, наверное, уже вряд ли что-то может быть, хотя точно я не знаю. Соль в том, что фон body переносится на canvas, только если у html background: transparent и background-image: none. Если немного модифицировать наш код

html {background: white;}

#grey_box {
width: 200px;
height: 200px;
border: solid 1px #ccc;
background: #ddd;
position: relative ;
}

#blue_box {
width: 100px;
height: 100px;
border: solid 1px #4a7497;
background: #8daac3;
position: relative;
z-index: -1;
}

и применить grey_box к body, а blue_box к потомку body, то потомок скроется под фоном body.

[SelenIT]

И еще почему так не работало?

Без указания z-index'а позиционированный элемент не создает "stacking context", а с ним — создает. А внутри этого контекста порядок слоев определен спекой так:

1. фон и границы элемента, содздающего stacking context.
   
2. вложенные stacking context-ы c отрицательным z-index (чем больше по модулю, тем раньше).
   
3. непозиционированные неинлайновые потомки в потоке
   
4. непозиционированные float-ы
   
5. непозиционированные инлайновые потомки в потоке (inline-table, inline-block).
   
6. вложенные stacking context-ы и позиционированные потомки с нулевым z-index
   
7. вложенные stacking context-ы c положительным z-index (чем меньше, тем раньше).
   

Я сам это только что узнал

позади фона боди только может быть фон элемента html

Там еще немного хитрее. Если указан фон для body, а для html не указан, то по факту этот фон применяется именно к html (так сложилось исторически и закреплено в стандарте в качестве исключения). Если указать фон и для одного, и для второго, путаница исчезает и body начинает вести себя как обычный div.

[amelice]

И еще почему так не работало?

Без указания z-index'а позиционированный элемент не создает "stacking context", а с ним — создает. А внутри этого контекста порядок слоев определен спекой так:

1. фон и границы элемента, содздающего stacking context.
   
2. вложенные stacking context-ы c отрицательным z-index (чем больше по модулю, тем раньше).
   
3. непозиционированные неинлайновые потомки в потоке
   
4. непозиционированные float-ы
   
5. непозиционированные инлайновые потомки в потоке (inline-table, inline-block).
   
6. вложенные stacking context-ы и позиционированные потомки с нулевым z-index
   
7. вложенные stacking context-ы c положительным z-index (чем меньше, тем раньше).
   

Я сам это только что узнал

Спасибо, думаю когда же SelenIT появится и расставит все по местам.

Но мне все равно не понятно.

В моем примере абзацы все абсолютно позиционированные. У них у всех было св-во z-index. и у их потомков тоже.

Между абзацами(родителями) работало z-index.

Но в внутри абзаца не работало это свойство. Я убрала у абзацев z-index, и только тогда в контексте абзаца заработало и по номеру расположились потомки.

Значит если нам указать z-index абзацам, то они сами окажутся в порядке слоев стека корневого элемента(в моем примере). а у самих как будто бы не создается этот стек.

[SelenIT]

В том-то и дело, что он как раз создается. Но почему-то спека посчитала, что фон и бордеры элементов, создающих стек, должны быть в нем в самом-самом низу...

[amelice]

В том-то и дело, что он как раз создается. Но почему-то спека посчитала, что фон и бордеры элементов, создающих стек, должны быть в нем в самом-самом низу...

Теперь понятно! Если потомок с отрицательным значением z-index все равно лежит выше чем фон родителя, значит лучше не создавать стек родителю?

[SelenIT]

Получается, что так.

[amelice]

Спасибо большое всем кто участвовал! Тема оказалась очень полезной для меня.

Edited August 3, 2011 by cheburek