z-index magic.

[Nanto]

Мне нужна ваша помощь в одном вопросе. Есть блок, у которого позиционирование относительное\абсолютное. У этого блока есть потомок, у которого абсолютное позиционирование. Как расположить визуально потомка ниже родителя? Оба блока имеют статичные ширину и высоту.

Вот пример - зелёный блок положить под красный :
http://jsbin.com/ekufop


PS. предпочтительна работа в IE 7,8.

Опять тупим...
По спеке дочерний блок располагается НАД родителем (а не "выше/ниже"), поскольку он ниже по коду. Выход? Вручную не судьба я-index для ВСЕХ позиционированных элементов проставить (желательно под 1000 - чтобы повторений не было) - дабы избежать подобных накладок???
И до кучи небольшая цитата с htmlbook:
Список, созданный с помощью тега <select>, в браузере Internet Explorer 6 всегда отображается поверх других элементов, несмотря на значение z-index.

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit и интерпретирует auto (это значение по умолчанию, т.е. для не опредённого z-index) как 0.

В браузере Firefox до версии 2.0 включительно отрицательное значение z-index располагает элемент ниже фона веб-страницы и его контента.

[Deff]

melky,
Ие 7 аш аура у зеленинького

[melky]

По спеке дочерний блок располагается НАД родителем (а не "выше/ниже"), поскольку он ниже по коду.

Я знаю, что он находится над родителем, поэтому и обратился на форум после гугла.

Выход? Вручную не судьба я-index для ВСЕХ позиционированных элементов проставить (желательно под 1000 - чтобы повторений не было) - дабы избежать подобных накладок???

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

Вы поняли, что я хотел получить в итоге?

melky,
Ие 7 аш аура у зеленинького

это не аура, это размытие

[devote]

и зачем нужна эта строчка :

а некая проверка, может там вставлять просто не перед чем, то-есть я же вставляю элемент после <div id="below"></div> и мне нужно поставить именно после него, если поставлю перед ним, ничего не сработает, то-есть мы не увидим нифига нужного нам эффекта. А так там просто проверка, если есть после элемента <div id="below"></div> что-то то перед этим и ставим, если нет, то просто аппендим к родителю.

немного поигрался... но не понял, почему пропадает зеленый блок (т.е. скрывается за копией красного)

Ну это потому что я ставлю новый элемент после <div id="below"></div> а не перед.

... и почему нельзя вынести свойства в таблицу стилей это меня удивило больше всего

не совсем понял о чем тут речь?

[Deff]

В браузере Firefox до версии 2.0

Чот я за последние два три года не видел Firefox до версии 2.0 , в день до 100 пользователей обращается

[Nanto]

Везде тормозит -во всех браузах - делал галлерею на shadow -box - захотелось обвести бордеры фоток тенью, дык если тень более 6 пиксел на 5-8 фотках - то воспроизведение этих бордюров на секунды тормозит страницу

Правильно Вам заметили - на рендеринг box-shadow ЛЮБОЙ браузер отъест столько ресурсов... Я делал как-то галерею с тремя холстами, сдублированием через canvas, и с реакцией на движение мыши - везде замечательно работает (ну кроме динозавров IE - хотя там canvas и не срабатывает, но в целом не тупит). Но стоит ввести box-shadow - даже хвалёный Хром безбожно тормозит! Выход - только через прозрачный png (ну или svg).

[Nanto]

melky,
Честно? Ни фига не понял!
Если работаете не с "блоками" а со "слоями" (элементами, которые перекрываются друг другом) - не логичнее их самому упорядочить по желаемому порядку? Браузер не может читать мысли!
Скриптом? Не проблема - только закономерность сформулируйте! И я думаю после этого ВЫ сами сможет присвоить через js подходящий я-index.

[melky]

не совсем понял о чем тут речь?

хм. наверное, я криво повыносил стили для "копии" (из expression) в класс.

Честно? Ни фига не понял!

Если сунуть тень рядом с элементом, или "вверх" (в body, например), то придётся запоминать, какая тень для текущего элемента где находится. Мне показалось наиболее лёгких решением вложить в элемент слой тени, и размыть её\добавить Alpha.

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

Короче, я попытался таким образом упростить.

Сначала я задумывался об использовании VML, но вскоре это решение откинул из-за бесконечного пропадания нижней-правой части фигуры в IE8 (я знаю, что это лечится относительным позиционированием.. но при экспериментах эта сволочь всё равно багалась), но потом это решение забросил ещё и почему-то. Я сейчас не помню, почему именно

[devote]

Nanto,
суть данного решения который пытается решить melky, заключается в том, что он удобен тем что можно легко удалить блок вместе с его тенями и прочей хренью из DOM дерева, то-есть удалив элемент #above он за собой потянет и все то что с ним связано. И это очень удобно, нежели пихать таким образом:

<div id="above">
    Hello World
  </div>
  <div id="below"></div>

где придется удалять и тень и элемент отдельно.

[Deff]

melky,
мну с тенями скок не бодался приходится делать opacity и gif (или, что тож самое - png 8-ричный) - ежели кроссбраузерно
Остальное всё: либо сугубо индивидуально и плохо воспроизводимо на иных проектах