Относительное позиционирование, проблема с укладкой в ​​div, т.е. 7 - PullRequest
Новая
       23

Относительное позиционирование, проблема с укладкой в ​​div, т.е. 7

1 голос
/ 28 июня 2011

Это мой пример кода, который не работает должным образом в IE7 - я думаю, позиция: относительная;проблема для IE7 

.oner {
  position:relative;
  height:50px;
  background:#fff;
  border:5px solid #e4e4e4;
  height:200px;
  margin-top:20px;
}

.onea {
  position:absolute;
  height:500px;
  right:0;
  width:200px;
  background: #eee; 
  z-index:999;
}

.onet {
  position:absolute;
  height:500px;
  left:0;
  width:200px;
  background:red; 
  z-index:999;
}

HTML: 

<div style="height:500px;width:900px;margin:auto;">
    <div class="oner">
        <div class="onea">IE IE7 this div goes behind the "oner" div below </div>
    </div>
    <div class="oner">
        <div class="onet">My name is Sumit Kumar Ray my email is ..</div>
    </div>
</div>

Что происходит, когда onea div идет после следующего oner div, но в других браузерах перекрывает его

Ответы [ 2 ]

1 голос
/ 28 июня 2011

установка z-index для div на самом деле должна создавать контекст стека, а не просто выводить div, к которому он применяется, поверх другого ... так что, хотя я думаю, что IE7 не совсем понял, (удивительно !)

Я думаю, что было бы лучше сделать oner делителями, которые создают начало стека, установив для них z-index, и то, что вы хотите, чтобы первые oner имели более высокий z-index чем второй 

<div style="height:500px;width:900px;margin:auto;">
    <div class="oner" style="z-index: 1;">
        <div class="onea">IE IE7 this div goes behind the "oner" div below </div>
    </div>
    <div class="oner">
        <div class="onet">My name is Sumit Kumar Ray my email is ..</div>
    </div>
</div>

при этом нет необходимости вообще иметь z-индекс дочерних элементов Absolutely Positions, поскольку эти div теперь берут свой «уровень z» от своего относительно позиционированного родителя - IE и стек могут быть весьма запутанными! *

CSS: 

.oner {
  position:relative;
  height:50px;
  background:#fff;
  border:5px solid #e4e4e4;
  height:200px;
  margin-top:20px;
}

.onea {
  position:absolute;
  height:500px;
  right:0;
  width:200px;
  background: #eee; 
}

.onet {
  position:absolute;
  height:500px;
  left:0;
  width:200px;
  background:red; 
}

Однако это означает, что если у вас больше двух, как в этом примере, вам нужно установить уровни для всех дивизий oner, причем первый будет самым высоким .. (вот почему я поставил стиль oner встроенный в HTML, если у вас есть больше, вам может понадобиться еще несколько классов для их разделения)

1 голос
/ 28 июня 2011

Поскольку оба внутренних делителя имеют zindex 999, второе должно перекрывать первое, хотя результаты zindex могут быть непредсказуемыми во всех браузерах.На самом деле вы должны установить различные значения zindex для точного контроля глубины.

...