Как поставить статический div поверх абсолютной позиции div?

Я создаю небольшое веб-приложение. У меня есть два div. Один является абсолютным, а другой - статичным. Я пытаюсь расположить мой статический div поверх моего абсолютного, так что он остается самым большим элементом.

Очень простой пример кода:

http://jsbin.com/efuxe3/edit

Как это можно сделать?

Изменить: Я использую z-index. Кажется, это не имеет никакого эффекта.

Ответ 1

z-index не относится к элементам static.

Согласно эта страница:

Это свойство определяет стек уровень поля, значение позиции которого равно один из absolute, fixed или relative.

Если вы сделаете свой div relative вместо этого, вы можете использовать z-index, чтобы определить порядок.

position: relative позиционирует элемент относительно его по умолчанию (статической) позиции, поэтому, если вы не укажете верхнюю, нижнюю, левую или правую, тогда не будет никакой разницы между static и relative, кроме этот относительный позволяет использовать z-index для перемещения элемента вверх по стеку.

Изменить: на основе вашего образца кода здесь рабочая демонстрация.

Изменить 2: на основе предложения Nathan D. Ryan в комментариях ниже, вы также можете применить отрицательный z-index к своему абсолютно позиционированному div. Это переместило бы его за все остальное на странице, у которой не было более низкого z-index.

Ответ 2

Вместо размещения статически расположенного элемента над абсолютно позиционированным элементом вы можете поместить абсолютно позиционированный элемент за статически расположенный элемент. Вы можете сделать это, установив z-index абсолютно позиционированного элемента на отрицательное значение. Однако, как упоминалось в @Town, это также поместит абсолютно позиционированный элемент позади всего остального в нормальном потоке.

Ответ 3

Вы можете применить отрицательный индекс z к другим элементам, поместив их за статический div. Это можно применить непосредственно к другим элементам, или вы можете использовать

*:not(connectedObjects){
    z-index:-1000000000000000000000000000;
  }

Но это не работает в Internet Explorer

Ответ 4

У вас может быть второй абсолютно позиционированный div, содержащий ваши статически расположенные элементы:

<div id="container">
   <div class="underlay">
      I want this to appear under my static items.
   </div>

   <div class="item_container">
       <div class="item">blah</div>
       <div class="item">yada</div>
       <div class="item">foo</div>
       <div class="item">bar</div>
   </div>
</div>

И ваш css

.underlay {
   position: absolute;
   z-index: 0;
}

.item_container {
   position:absolute;
   z-index:10;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
}

.item {
   position: static;
}

Ответ 5

Если по вершине вы имеете в виду z-Index, вы можете установить стиль этого div с более высоким z-индексом

div.divClassName {
   z-Index:100;
}

изменить:

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

Если у вас действительно есть веская причина использовать позиционирование в static, вы можете изменить его к относительному, и z-index будет иметь эффект. Я попробовал его в вашем примере кода и отлично работает;

Ответ 6

Работа с атрибутом z-index. z-index объекта, который должен быть спереди, должен быть выше, чем другие.