z-индекс между детьми и родителями

Question

У меня проблемы с обработкой порядка z-index для приложения, над которым мы работаем, у меня есть два корневых родителя, навигационная панель и карта, и один дочерний элемент, всплывающая подсказка карты. Навигационная панель должна быть видна над картой, поэтому она имеет более высокий z-индекс, но проблема в том, чтобы сделать подсказку в контейнере карты, которая также будет отображаться на боковой панели, довольно сложно объяснить, чтобы вы могли визуализировать дело на http://jsbin.com/afakak/2/edit:

 <div id="nav-bar">
    The nav bar
  </div>

  <div id="map-container">
      This is the map container
      <div id="tooltip">
            This is the Tooltip
      </div>
  </div>

Спасибо за любую помощь.

Answer 1

Если #map-container позиционируется (то есть не является статичным), это невозможно, так как сравнивается z-индекс:

body (или любой другой позиционированный родительский элемент) является ссылкой для обоих #map-container а также #nav-bar, любой z-index Вы их даете рассчитывается по отношению к родительскому элементу. Таким образом, один из двух элементов с более высоким z-индексом будет отображаться над другим и всеми его дочерними элементами. Z-индекс #tooltip будет сравниваться только с другими детьми #map-container,

Вы можете сделать, как сказал Начо, и статически позиционировать #map-container, Вы можете имитировать фиксированное позиционирование через Javascript, если хотите.

Если вы не можете сделать это, вам нужно изменить разметку, чтобы #nav-bar а также #tooltip имеют общий позиционированный родительский элемент. Либо двигаться #nav-bar внутри #map-container, или же #tooltip из этого.

Answer 2

Ниже решение должно работать, но я не знаю, есть ли у вас требование, как nav-bar вне map-container, Если так, то я не думаю, что для этого есть обходной путь.

CSS:

#tooltip-helper{
    position:relative;
    /*below properties are to demonstrate the helper*/
    width:10px;
    height:10px;
    background-color:green;
    top:200px;
    left:200px;
}

#tooltip
{
    position:absolute;
    top:10px;/*this is just to make sure helper is visible*/
    left:-100px;/*this is to center the tooltip*/
    width: 200px;
    height: 200px;
    background-color: yellow;
    color: black;
    padding: 10px;
    z-index: 15;
}

HTML:

<div id="map-container">
    <div id="nav-bar">
      The nav bar
    </div>
    This is the map container
    <div id="tooltip-helper">
          <div id="tooltip">This is the Tooltip</div>
    </div>
</div>

Answer 3

После прохождения ваших кодов я это заметил.

 #tooltip{
background-color: yellow;
width: 200px;
height: 200px;
color: black;
padding: 10px;
z-index: 15;
    }

У вашего #tooltip есть z-индекс, но он не позиционирован. Свойство Z-index будет работать, только если оно имеет одно из значений свойства position. И учитывая, что вы хотите, чтобы всплывающая подсказка выделялась, вы должны использовать абсолютное значение позиции, как это.

 #tooltip{
position: absolute;
background-color: yellow;
width: 200px;
height: 200px;
color: black;
padding: 10px;
z-index: 15;
 }

HTML

<div id="map-container">
<div id="nav-bar">
The nav bar
    </div>
  This is the map container
  <div id="tooltip">
        This is the Tooltip
  </div>
        </div>

Это держит #tooltip сверху....

Answer 4

Если на реальной странице tooltip должен отображаться только при наведении курсора на контейнер карты, вы можете просто динамически изменить его z-индекс следующим образом:

#map-container:hover
{
    z-index: 16
}

В противном случае вам нужно изменить положение tooltip таким образом nav-bar не перекрывает это.

Answer 5

Я думаю, что единственный способ сделать это с position: fixed на #map-container реструктурировать подсказки для отображения за пределами #map-container. Таким образом, при нажатии на значок "внутри" контейнера карты, сама подсказка отображается над обоими (с соответствующим z-index задавать).

 <div id="nav-bar">
    The nav bar
  </div>

  <div id="map-container">
      This is the map container
  </div>

  <div id="tooltip">
      This is the Tooltip
  </div>

Answer 6

Вы должны абсолютно позиционировать nav-bar а также tooltip (иначе z-index не будет учитываться), и поддерживать map-container статическое положение

#map-container{
    ...
    position: static;
    ...
}

#nav-bar{
    ...
    position: absolute;
}

#tooltip{
    ...
    position: absolute
}

Answer 7

Для будущих читателей с похожими проблемами - Если ваши конфликтующие дочерние элементы position: fixedрассмотрите возможность установки высоты родительских контейнеров в 0px, а затем перенесите любые родительские настройки отображения фона на общего прародителя конфликтующих потомков.

Это решило мою аналогичную делимму.