Как сделать, чтобы блок "display: none" при показе был поверх других элементов?

Рейтинг: 1Ответов: 1Опубликовано: 16.04.2015

$('#example').popover(options)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="info-content" class="info-content" style="cursor: pointer;">
  <div class="info-content-title">
    <div class="g-item">TEST</div>
    <div id="info-content-body-1" style="z-index: 100;display: none;">
      <div class="info-close">
        <a href="#">
          <img src="/media/maps/info_close.gif" alt="Закрыть">
        </a>
      </div>
      <div class="info-content-body-item">Адрес: {{shop.addres}}</div>
      <div class="info-content-body-item">Часы работы: {{shop.workhours}}</div>
      <div class="info-content-body-item">Телефоны: {{shop.phones}}</div>
      <div class="info-content-body-link"><a href="/page/contact_maps/?shop={{shop.city.pk}}">Показать на карте</a>
      </div>
      <strong>{{metro.city.other_information}}</strong>
      {%endfor%}
    </div>

    <div id="info-content" class="info-content" style="cursor: pointer;">
      <div class="info-content-title">
        <div class="g-item">TEST2</div>
        <div id="info-content-body-2" style="z-index: 100;display: none;">
          <div class="info-close">
            <a href="#">
              <img src="/media/maps/info_close.gif" alt="Закрыть">
            </a>
          </div>
          <div class="info-content-body-item">Адрес: {{shop.addres}}</div>
          <div class="info-content-body-item">Часы работы: {{shop.workhours}}</div>
          <div class="info-content-body-item">Телефоны: {{shop.phones}}</div>
          <div class="info-content-body-link"><a href="/page/contact_maps/?shop={{shop.city.pk}}">Показать на карте</a>
          </div>
          <strong>{{metro.city.other_information}}</strong>
          {%endfor%}
        </div>

https://jsfiddle.net/mukav1bp/

сейчас при нажатии на TEST вылазит блок и двигает TEST2 вниз, я хочу чтоб он вылазил поверх TEST2 и не нарушал мне структуру

css javascript html
Источник: Stack Overflow на русском

Ответы

▲ 2Принят

Для всплывающих блоков пропишите абсолютное позиционирование.
Пример:

#info-content-body-1 {
    position:absolute;
    background: #fff;
}