| Deff | 07.06.2012 00:27 |
melky,
:blink: Ие 7 аш аура у зеленинького
:blink: Ие 7 аш аура у зеленинького
z-index magic.
Мне нужна ваша помощь в одном вопросе. Есть блок, у которого позиционирование относительное\абсолютное. У этого блока есть потомок, у которого абсолютное позиционирование. Как расположить визуально потомка ниже родителя? Оба блока имеют статичные ширину и высоту.
Вот пример - зелёный блок положить под красный : http://jsbin.com/ekufop PS. предпочтительна работа в IE 7,8. |
никак, нельзя ребенка положить ниже родителя. Хотя если -1 поставить то должно
|
???
#below {
z-index:-1;
background-color: green;
position: absolute;
top: 20px;
left: 20px;
}
|
ну да, -1 вроде помогает.. не зря я с сомнением ответил.. лень тестить просто было.
|
devote, Deff, спасибо. Но в IE 7 не работает этот способ. Что делать?
http://jsbin.com/ekufop/2 |
Цитата:
Не вроде не работает... |
Цитата:
Сломалось :). |
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>:)</title>
<style>
#above, #below {
width: 300px;
height: 300px;
}
#above {
background-color: red;
position: relative;
top: 10px;
left: 15px;
}
#below {
background-color: green;
position: absolute;
z-index: -1;
top: 20px;
left: 20px;
/* весь этот говнокод ради ИЕ7 */
border: 0px solid green;
background-color: expression("transparent");
width: expression(this.oldWidth?1:(this.oldWidth=this.currentStyle.width),parseInt(this.oldWidth)-parseInt(this.currentStyle.left)+"px");
height: expression(this.oldHeight?1:(this.oldHeight=this.currentStyle.height),parseInt(this.oldHeight)-parseInt(this.currentStyle.top)+"px");
border-bottom-width: expression(this.currentStyle.top);
border-right-width: expression(this.currentStyle.left);
}
</style>
</head>
<body>
<div id="above">
Hello World
<div id="below"></div>
</div>
</body>
</html>
|
melky,
Помню что как то боролся,(посколь до devote expression не пользовался) но нужно устраивать танцы с бубном, в принципе, если делать равными квадратами и не на родителе, а с наездом с одинаковым позиционированием - вродь проблем не возникает (Или потомственость оч актуальна ? |
devote, абалденно. Не могли бы Вы пояснить, почему он работает?
Сохранил как http://jsbin.com/ekufop/5/ PS. в карме защита от накрутки =) Цитата:
Этот код относится к имплементации box-shadow для IE. Так "странно", потому что это единственный адекватный и нетормозящий способ. ... а ещё у меня на ноуте не проставлены видео драйверы, и фильтры вроде Shadow у меня не отображаются :) с остальными всё ок. |
Цитата:
У нас есть квадрат, размеры его мы знаем, позиции от верха и от низа родителя мы тоже знаем, то-есть в CSS это все прописано, тем самым за счет экспрешена мы убираем задний фон с элемента, и добавляем бордюр элементу с нужным нам цветом. Затем уменьшаем элемент на то значение что указано в top/left. Вся эта хрень не будет увы работать если фоном сделать не просто зеленый цвет а например картинку, тогда увы получим мы хреню. |
Цитата:
Цитата:
|
Цитата:
|
Цитата:
Пришлось эмулировать gif- картинкой с прорезом центральной области по размеру вставленного блока и opacity |
Цитата:
http://jsbin.com/ekufop/6 мне что-то подсказывает, что нужно пооперировать с Chroma filter на #above (красном). Но успехом это не увенчалось. Цитата:
никогда такое размытие не применял :) максимум дело доходило до 50. |
Цитата:
|
ладно, вот немного иной говнокод:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>:)</title>
<style>
* { margin:0; padding:0; }
#above, #below {
width: 300px;
height: 300px;
}
#above {
background-color: red;
position: relative;
top: 10px;
left: 15px;
}
#below {
background-color: green;
position: absolute;
top: 20px;
left: 20px;
z-index: -1;
/*IE7*/
filter: progid:DXImageTransform.Microsoft.Blur(pixelRadius=3);
/*IE8*/
-ms-filter: progid:DXImageTransform.Microsoft.Blur(pixelRadius=3);
/* весь этот говнокод ради ИЕ7 */
govnokod: expression(
this.elAppended?(
this.elAppended.style.backgroundImage=this.parentNode.currentStyle.backgroundImage,
this.elAppended.style.backgroundColor=this.parentNode.currentStyle.backgroundColor
):(
this.elAppended=document.createElement('div'),
this.nextSibling?this.parentNode.insertBefore(this.elAppended,this.nextSibling):
this.parentNode.appendChild(this.elAppended),
this.elAppended.style.position='absolute',
this.elAppended.style.width='100%',
this.elAppended.style.height='100%',
this.elAppended.style.backgroundImage=this.parentNode.currentStyle.backgroundImage,
this.elAppended.style.backgroundColor=this.parentNode.currentStyle.backgroundColor,
this.elAppended.style.left=0,
this.elAppended.style.top=0,
this.elAppended.style.zIndex=-1
)
);
}
</style>
</head>
<body>
<div id="above">
Hello World
<div id="below"></div>
</div>
</body>
</html>
|
поправил немного :)
|
вот даже проблему с задним фоном решил, тоесть если у родителя другой цвет будешь ставить скриптом, или вообще картинку, то все будет чики-поки.
|
Цитата:
хм.. три элемента вместо одного.. это всё-же лучше бажёного VML, где отваливается правая-нижняя часть у rect в IE8. немного поигрался... но не понял, почему пропадает зеленый блок (т.е. скрывается за копией красного) и зачем нужна эта строчка : this.nextSibling?this.parentNode.insertBefore(this.elAppended,this.nextSibling): this.parentNode.appendChild(this.elAppended), ... и почему нельзя вынести свойства в таблицу стилей :blink: это меня удивило больше всего Засейвил здесь: http://jsbin.com/ekufop/8/ Цитата:
PS завтра докурю и добью box-shadow в IE. сейчас я уже начинаю тупить, и завтра рано вставать. спасибо за помощь. |
Цитата:
По спеке дочерний блок располагается НАД родителем (а не "выше/ниже"), поскольку он ниже по коду. Выход? Вручную не судьба я-index для ВСЕХ позиционированных элементов проставить (желательно под 1000 - чтобы повторений не было) - дабы избежать подобных накладок??? И до кучи небольшая цитата с htmlbook: Список, созданный с помощью тега <select>, в браузере Internet Explorer 6 всегда отображается поверх других элементов, несмотря на значение z-index. Internet Explorer до версии 7.0 включительно не поддерживает значение inherit и интерпретирует auto (это значение по умолчанию, т.е. для не опредённого z-index) как 0. В браузере Firefox до версии 2.0 включительно отрицательное значение z-index располагает элемент ниже фона веб-страницы и его контента. |
melky,
:blink: Ие 7 аш аура у зеленинького |
Цитата:
Цитата:
Вы поняли, что я хотел получить в итоге? Цитата:
|
Цитата:
Цитата:
Цитата:
|
Цитата:
|
Цитата:
|
melky,
Честно? Ни фига не понял! Если работаете не с "блоками" а со "слоями" (элементами, которые перекрываются друг другом) - не логичнее их самому упорядочить по желаемому порядку? Браузер не может читать мысли! Скриптом? Не проблема - только закономерность сформулируйте! И я думаю после этого ВЫ сами сможет присвоить через js подходящий я-index. |
Цитата:
Цитата:
Тем более, что по моей задумке, когда мы скрываем элемент, или двигаем, тень движется с ним, а не тянется рядом (с помощью step). Короче, я попытался таким образом упростить. Сначала я задумывался об использовании VML, но вскоре это решение откинул из-за бесконечного пропадания нижней-правой части фигуры в IE8 (я знаю, что это лечится относительным позиционированием.. но при экспериментах эта сволочь всё равно багалась), но потом это решение забросил ещё и почему-то. Я сейчас не помню, почему именно :) |
Nanto,
суть данного решения который пытается решить melky, заключается в том, что он удобен тем что можно легко удалить блок вместе с его тенями и прочей хренью из DOM дерева, то-есть удалив элемент #above он за собой потянет и все то что с ним связано. И это очень удобно, нежели пихать таким образом: <div id="above">
Hello World
</div>
<div id="below"></div>
где придется удалять и тень и элемент отдельно. |
melky,
мну с тенями скок не бодался приходится делать opacity и gif (или, что тож самое - png 8-ричный) - ежели кроссбраузерно Остальное всё: либо сугубо индивидуально и плохо воспроизводимо на иных проектах |
Цитата:
Цитата:
C другой стороны, как при таком раскладе рендерить inset box-shadow... |
Цитата:
|
Честно говоря не вижу причины не сделать так и не парить мозги:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>:)</title>
<style>
#above, #below {
width: 300px;
height: 300px;
}
#above {
position: relative;
top: 10px;
left: 15px;
}
#below {
background-color: green;
position: absolute;
top: 20px;
left: 20px;
}
#content{
position: absolute;
top: 0;
left: 0;
height:100%;
width:100%;
background-color: red;
}
</style>
</head>
<body>
<div id="above">
<div id="below"></div>
<div id="content">Hello World</div>
</div>
</body>
</html>
|
ну вот ради теста решил добавить тень, вроде идентично получилось:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>:)</title>
<style>
* { margin:0; padding:0; }
#above, #below {
width: 300px;
height: 300px;
}
#above {
background-color: red;
position: relative;
top: 10px;
left: 15px;
}
#below {
background-color: black;
position: absolute;
top: 0px;
left: 0px;
z-index: -1;
box-shadow: 5px 5px 8px rgba( 0, 0, 0, 0.6 );
/*IE7*/
filter: Alpha(opacity=60) progid:DXImageTransform.Microsoft.Blur(pixelRadius=4);
/*IE8*/
-ms-filter: Alpha(opacity=60) progid:DXImageTransform.Microsoft.Blur(pixelRadius=4);
/* весь этот говнокод ради ИЕ7 */
govnokod: expression(
this.elAppended?(
this.elAppended.style.backgroundImage=this.parentNode.currentStyle.backgroundImage,
this.elAppended.style.backgroundColor=this.parentNode.currentStyle.backgroundColor
):(
this.elAppended=document.createElement('div'),
this.nextSibling?this.parentNode.insertBefore(this.elAppended,this.nextSibling):
this.parentNode.appendChild(this.elAppended),
this.elAppended.style.position='absolute',
this.elAppended.style.width='100%',
this.elAppended.style.height='100%',
this.elAppended.style.backgroundImage=this.parentNode.currentStyle.backgroundImage,
this.elAppended.style.backgroundColor=this.parentNode.currentStyle.backgroundColor,
this.elAppended.style.left=0,
this.elAppended.style.top=0,
this.elAppended.style.zIndex=-1
)
);
}
</style>
</head>
<body>
<div id="above">
Hello World
<div id="below"></div>
</div>
</body>
</html>
Идеальное на мой взгляд решение. Спасибо melky, за решение, сам буду пользоваться им. |
Оффтоп...
Но мрак какой-то! Мы вдвоём, я - верстальщик, и второй js-программист-верстальщик, сумели через нашего очень вменяемого начальник протащить решение о том что наша (очень серъёзная) компания больше не поддерживает IE6-7, мы раньше пытались смотреть чтобы хотя бы структура не ломалась в старых ослах (и плевать на плюшки) - а теперь официально забили (даже тестировщики не проверяют)! Пусть хоть всё там "едет" - мы делаем рекламу для Майкрософта для IE9 - даже "родители" официально открещиваются от своего детища - но у нас есть всплывашка "Ваш браузер устарел"... Одна беда - надо IE8 поддерживать (ради тупоголовых пользователей XP) - это даже не 7-ой, но все равно... Хотя даже менеджеры мирятся с тем что border-radius реализуется "только картинками и поэтому ну его нафиг!" А ведь это "коммерция", и уж они-то как никто лоюбят считать пользователей... Раньше я тоже страдал перфекционизмом, и вылизывал даже для IE6 (хотя бы ради своего эго), но потом пошли крупные проекты косяком, времени стало не хватать - и я забил на IE6-7 (сторонние проекты вообще смотрю только в файербаге) - и никто пока не возмущался... Может и Вам стоит задуматься? Тем более, судя по всему, Вы не так хорошо в вёрстке разбираетесь - а поддержка IE6 требует такого же количества энциклопедических знаний вёрстки для IE6, как и весь CSS3 (всякие там "3px gap", "!important", "min-height" etc...)... Добрый совет - не захламляйте себе голову - год-два и кол-во пользователей IE6-7 станет 0,1% - а своего личного времени Вы впустую убъёте... Начните уж тогда и Amaya поддерживать - а чё? Самый правильный браузер! |
Цитата:
Люди если вы пытаетесь каждый раз говорить подобные фразы, то это лишь лишний раз доказывает обратное. Человек с опытом, никогда подобного не скажет. А что насчет поддержки ИЕ, это уж мы как нибудь сами решим отказаться от него или нет. И лишний раз говорить об этом нет смысла, может вам легче становится от того что вы в каждой теме об этом напоминаете, или просто пытаетесь получить кайф от того что выговорились. Об этом всем давно известно, какой смысл сотню раз пережевывать одно и тоже. И хвать делать из себя умных. Умнее вы для нас не станете все равно, ибо в инете все равны. И тут нет глупых и умных. |
Nanto,
Вот тут я с тобой на 200% согласен! В жопу отстой весь, всякие 6-7, у меня на работе так, ниже 8 заглушка с текстом типа обновите браузер если не хочешь можешь отключить и попадёшь на разваленный сайт. 8 главное чтоб макет не развалился и можно было хоть както пользоваться сатом, 9 должен быть нормальный на 95% всякие анимации cssные в нём не будут работать и градиенты не особо парюсь. остальные браузеры исключительно последние версии. |
Я вообще сейчас подумываю начать грид, флекс бокс и т.д. юзать попробовать, а для 9 и ниже скриптом эмулировать вроде есть уж готовые решения.
|
devote,
Холиварить будем? Таблицы любите? Расскажите-ка мне об особенностях поведения таблиц ("ведь это так кроссбраузерно") в разных браузерах при переполнении ячейки контентом... Где ячейка раздвинется (не смотря на заданную ширину), а где обрежет, а где перенсёт на следующую строку... Оптимально всё это прокуривать? Тогда джедайствуйте, только потом не просите пощады... ;) |
Seva1986,
Так есть. Только насчёт 9 не согласен - да с transition, animation проблемы, но с этим и так рановато спешить! Градиенты в 9 работают, только border-radius при этом не срабатывает, поэтому ему надо "скармливать" base64 - я вот пользуюсь кроссбраузерным генератором - ни разу не подводил: http://www.colorzilla.com/gradient-editor/ А со скриптами - больше возни получится!.. Ну это вообще стиль... Как кто кодит... Я пишу основную вёрстку под "тройку браузеров" (с плюшками CSS3), то что можно, прописываю отдельно для IE9, смотрю чтобы не разваливалось в 8-ом... И всё! P.S. Это слава богу что Microsoft в своё время продавил в консорциуме условные комментарии - кому так охота поддерживать старых ослов - можете писать для них отдельную вёрстку! Слабо? |
| Часовой пояс GMT +3, время: 11:28. |