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

У меня возникли проблемы с разработкой порядка Z-индекса для приложения, над которым мы работаем, у меня есть два корневых родителя, панель навигации и карта и один ребенок, подсказка карты. Navbar должен быть виден над картой, поэтому он имеет более высокий 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>

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

6
css z-index

7 ответов

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

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

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

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

15

ниже Решение должно работать, но я не знаю, есть ли у вас требование, как держать 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>
2

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

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

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

#tooltip{
    ...
    position: absolute
}
0

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

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

пройдя через ваши коды, я заметил это.

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

подсказка #имеет 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 на вершине....

0

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

Это решает мою аналогичные delimma.

0

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

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

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

0