z-index - Абсолютный элемент между двумя другими

0

У меня есть проблема с пониманием z-индекса.

Пожалуйста, взгляните на эту скрипку, которую я создал для вас: http://jsfiddle.net/df3EL/

<div id="content">    
    1. Content

    <div id="popup">
        3. PopUp
    </div>
</div>

<div id="footer">
    2. Footer
</div>

Я знаю, что позиционирование и непрозрачность влияют на z-index. Но с этой разметкой, независимо от того, что я пытаюсь, нижний колонтитул выше 1 и 3 или ниже - никогда между ними.

Есть ли способ сделать заказ (1, 2, 3) работать без изменения html-разметки?

Теги:
z-index

4 ответа

2
Лучший ответ

z-index наследует от родительского элемента

Поэтому, если ваш 1 элемент имеет z-индекс 100, ваш 3 элемент не может превышать это значение в глобальной области. В локальной области (внутри элемента #content) z-index будет по существу "перезагружаться",

Чтобы ваша работа работала, вам нужно изменить разметку HTML, чтобы сделать каждый элемент независимым (чтобы они могли иметь последовательный z-индекс в глобальной области)

Поделиться
  • 0
    Ааа, глобальная сфера . Это то, чего мне не хватало. Спасибо, сэр!
  • 1
    Нет проблем - надеюсь, это поможет!
Показать ещё 1 комментарий
2

если вы хотите, чтобы всплывающее окно находилось ниже, просто установите индекс для нижнего колонтитула и всплывающего окна: http://jsfiddle.net/df3EL/1/

div {
    font-family: Verdana;
    font-size: 11px;
    padding: 20px;
}

div#content {
    display: block;
    height: 150px;
    width: 250px;
    background: #eee;
    position: relative;
}

div#footer {
    display: block;
    height: 50px;
    width: 250px;
    background: #eeefc0;
    position: relative;
    left: 25px;
    top: -25px;
    z-index: 1;
}

div#popup {
    display: block;
    height: 140px;
    width: 100px;
    background: #C0C0EF;
    position: relative;
    left: 220px;
    top: -5px; 
    z-index: 2;
}
Поделиться
  • 0
    Это работает и является самым простым ответом. Жаль, что я не могу удалить z-index из своего основного контейнера. Спасибо за ответы. Мне очень помогли!
  • 1
    есть ли причина, по которой вы не можете удалить z-index из #content?
Показать ещё 3 комментария
1 
[http://jsfiddle.net/df3EL/3/][1]

Удалите все свойства z-index, кроме div # popup. Он должен работать в современном браузере (предположим ie9+, chrome, opera, FF)

Но более логичный способ перемещает #popup после #footer (возможно, он должен делать с javascript, когда это необходимо, чтобы показать всплывающее окно)

Поделиться
0

Вы использовали position:relative для div#footer div#popup. Измените это на position: absolute и измените vaules top, bottom, left,right чтобы получить желаемый результат.

При этом вам не придется менять структуру html.

Поделиться
  • 0
    Спасибо за попытку, но это не сработает. Все еще не будет между 1 и 3 .

Ещё вопросы

Сообщество Overcoder
Наверх
Меню