|
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 у меня не отображаются :) с остальными всё ок. |
| Часовой пояс GMT +3, время: 11:38. |
|