Форум

melky · #1 (**permalink**) 06.06.2012, 22:02

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

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

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

devote · #2 (**permalink**) 06.06.2012, 22:06

никак, нельзя ребенка положить ниже родителя. Хотя если -1 поставить то должно

Deff · #3 (**permalink**) 06.06.2012, 22:10

???

#below {
    z-index:-1;
    background-color: green;
    position: absolute;
    
    top: 20px;
    left: 20px;
    
  }

devote · #4 (**permalink**) 06.06.2012, 22:11

ну да, -1 вроде помогает.. не зря я с сомнением ответил.. лень тестить просто было.

melky · #5 (**permalink**) 06.06.2012, 22:15

devote, Deff, спасибо. Но в IE 7 не работает этот способ. Что делать?
http://jsbin.com/ekufop/2

Seva1986 · #6 (**permalink**) 06.06.2012, 22:21

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

Но в IE 7 не работает этот способ.

Не у верен, но попробуй поставить родителью z-index:1 например. вроде бы это помогает но точно не помню.

Не вроде не работает...

melky · #7 (**permalink**) 06.06.2012, 22:32

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

Не у верен, но попробуй поставить родителью z-index:1 например. вроде бы это помогает но точно не помню.

http://jsbin.com/ekufop/3
Сломалось

.

devote · #8 (**permalink**) 06.06.2012, 22:49

<!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>

Deff · #9 (**permalink**) 06.06.2012, 22:55

melky,
Помню что как то боролся,(посколь до devote expression не пользовался) но нужно устраивать танцы с бубном, в принципе, если делать равными квадратами и не на родителе, а с наездом с одинаковым позиционированием - вродь проблем не возникает (Или потомственость оч актуальна ?

melky · #10 (**permalink**) 06.06.2012, 22:55

devote, абалденно. Не могли бы Вы пояснить, почему он работает?

Сохранил как
http://jsbin.com/ekufop/5/

PS. в карме защита от накрутки =)

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

melky,
Помню что как то боролся,(посколь до devote expression не пользовался) но нужно устраивать танцы с бубном, в принципе, если делать равными квадратами и не на родителе, а с наездом с одинаковым позиционированием - вродь проблем не возникает (Или потомственость оч актуальна ?

само собой, я знаю, как это делается по-нормальному. но в этой ситуации надо было именно через потомка и родителя.

Этот код относится к имплементации box-shadow для IE. Так "странно", потому что это единственный адекватный и нетормозящий способ.

... а ещё у меня на ноуте не проставлены видео драйверы, и фильтры вроде Shadow у меня не отображаются

с остальными всё ок.

Форум

Справочник

Discord чат

Курсы javascript