Относительные div-ы покрывают фиксированный div с более высоким z-индексом

Question

Относительные div-ы покрывают фиксированный div с более высоким z-индексом

0

Привет, У меня есть следующий код HTML

<body>
    <div class="relative1"> 
        <div class="fixed1"> </div> 
    </div>
    <div class="relative2"> </div> 
</body>

и CSS

.relative1 {
  left: 0px;
  top: 0px;
  width: 100px; 
  height: 100px;
  background-color: red; 
  position: relative; 
  z-index: 1; 
}

.fixed1 {
  width: 100px; 
  height: 100px;
  left: 20px;
  top: 20px;
  background-color: green; 
  position: fixed; 
  z-index: 2; 
}

.relative2 {
  width: 100px; 
  height: 100px;
  left: 30px;
  top: -80px;
  background-color: blue; 
  position: relative; 
  z-index: 1; 
}

Пример: FIDDLE

Вы можете видеть, что div.relative2 охватывает мой div.fixed1 чего я не хочу. Мне нужно покрыть все своим div.fixed1. Есть ли способ сделать это без изменения css для .relative1 и .relative2 css?

DaZzz 30 дек. 2013, в 14:18

Источник

0

все же ваш вопрос не ясен ... пожалуйста, будьте более конкретны
Gourav 30 дек. 2013, в 12:26

Теги:

html

css

2 ответа

0

задавать

.relative2{
z-index: -1;
}

mcmac 30 дек. 2013, в 10:58

0

Я не должен менять стили для .relative1 и .relative1
DaZzz 30 дек. 2013, в 12:30
0

Хорошо, так что вы можете использовать ответ Кима - вмешательство в структуру не в CSS
mcmac 30 дек. 2013, в 12:33

Ещё вопросы

все же ваш вопрос не ясен ... пожалуйста, будьте более конкретны
Я не должен менять стили для .relative1 и .relative1
Хорошо, так что вы можете использовать ответ Кима - вмешательство в структуру не в CSS

Trace · Accepted Answer · 2013-12-30T10-03-00.000Z

Не вставляйте фиксированный div в относительный div:

http://jsfiddle.net/WGcRe/1/

<body>
    <div class="relative1"> 
    </div>
    <div class="fixed1"> </div>     
    <div class="relative2"> </div> 
</body>

Фиксированные элементы не связаны с относительно позиционированными элементами; они прилипают к экрану.
Следовательно, я не вижу причины их гнездовать.

Потому что я использую ember.js и рендеринг всплывающего div внутри другого div. Я не могу сделать это снаружи, потому что я буду скучать по данным.
Это связано с первой частью этого вопроса.
Я использую Backbone, а не Ember, но логика должна быть одинаковой. Вы не можете сказать: «Я должен отобразить это представление в этом другом представлении». Скорее, вы должны выяснить, как добавить div к dom как фиксированный, независимый элемент. Нет смысла вкладывать независимый фрагмент html в другой div, который технически не связан. «Я не могу сделать это снаружи, потому что я пропущу данные». Извините, но это не имеет смысла для меня. Любая инфраструктура MVC должна иметь возможность добавлять представление в соответствии с моделью к dom так, как вы предпочитаете.