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

Question

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

 <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

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

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

Answer 4

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

 #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 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

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

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

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