Элемент с абсолютным положением за элементом с относительным положением во вложенном дереве и z-индексом не действуют

У меня есть вложенная таблица, в которой я должен показать всплывающую подсказку для текстов. Я извлек проблему в jsfiddle, проблема в том, что я не могу расположить синий элемент поверх Block 2.1 Content, даже если я установил z-index очень большой.

Здесь снова код html и css для этого:

.block {
  display: block;
}

.content {
  border: 1px solid #ccc;
  padding: 2px 5px;
  box-shadow: 5px 5px 10px black;
  height: 30px;
  width: 90%;
  line-height: 30px
}

.block1_content {
  z-index: 3;
  position: relative;
  background: white;
}

.block2_content {
  z-index: 2;
  margin-left: 10px;
  position: relative;
  background: #ccc;
}

.tooltip {
  position: absolute;
  display: block;
  background: blue;
  color: white;
  height: 40px;
  width: 100px;
  z-index: 99999;
  padding: 5px 10px;
  top: 15px
}

<div class = "block1 block">
  <div class = "block1_content content">Block 1 Content</div>
  <div class = "block2 block">
    <div class = "block2_content content">
      Block2 Content
      <div class = "tooltip">Tooltip</div>
    </div>
  </div>
</div>
<div class = "block1 block">
  <div class = "block1_content content">Block 2.1 Content</div>
  <div class = "block2 block">
    <div class = "block2_content content"> Block 2.2 Content</div>
  </div>
</div>

РЕДАКТИРОВАТЬ

Здесь немного усложненная версия кода/проблемы по запросу.

philipwalton.com/articles/what-no-one-told-you-about-z-index

— 12.03.2019 13:56

проверьте это: stackoverflow.com/a/54903621/8620333 (удалите z-index из .block2_content, и вы получите то, что хотите)

— 12.03.2019 13:57

@TemaniAfif спасибо за предложение, проблема в том, что в моем реальном коде мне нужен z-индекс для block2_content, потому что у меня есть другие блоки, которые находятся под block2_content, чтобы block2_content отображал (тень блока) выше block3_content и так один.

— 12.03.2019 14:44

@04FS Спасибо за ссылку. Кажется, там много полезной информации, но я все равно не смог решить свою проблему с этим, не могли бы вы попытаться исправить код в моем опубликованном jsfiddle?

— 12.03.2019 14:46

@Sheki Пока что вы не можете изменять структуру html и визуальную глубину элементов. Я не думаю о каком-либо решении в CSS. Хотите js-решение?

— 12.03.2019 15:10

@MoorthyG Я тоже как раз думал о решении js (мое приложение все равно в angular), но я хотел сначала попробовать решение css, все равно спасибо!

— 12.03.2019 15:24

Может ли кто-нибудь объяснить мне отрицательное голосование, иначе это действительно не мотивирует публиковать вопросы в stackoverflow?

— 12.03.2019 15:51

html css

12.03.2019 13:54

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Ответы 1

надеюсь, это поможет вам. Спасибо

.block {
  display: block;
}
.relative{
  position: relative
}

.content {
  border: 1px solid #ccc;
  padding: 2px 5px;
  box-shadow: 5px 5px 10px black;
  height: 30px;
  width: 90%;
  line-height: 30px
}

.block1_content {
  z-index: 3;
  position: relative;
  background: white;
}

.block2_content {
  z-index: 2;
  margin-left: 10px;
  position: relative;
  background: #ccc;
}

.tooltip {
  position: absolute;
  display: block;
  background: blue;
  color: white;
  height: 40px;
  width: 100px;
  z-index: 99999;
  padding: 5px 10px;
  top: 15px
}

<div class = "block1 block">
  <div class = "block1_content content">Block 1 Content</div>
  <div class = "block2 block">
    <div class = "block2_content content">
      Block2 Content
      
    </div>
  </div>
</div>
<div class = "block1 block relative">
<div class = "tooltip">Tooltip</div>
  <div class = "block1_content content">Block 2.1 Content</div>
  <div class = "block2 block">
    <div class = "block2_content content"> Block 2.2 Content</div>
  </div>
</div>

Вы изменили положение всплывающей подсказки, это, к сожалению, не для меня, все равно спасибо за пост! Опубликованный пример был лишь небольшой частью, в моем реальном примере у меня очень сложная структура (реальный пример содержит 4 уровня вложенных таблиц с несколькими текстами и элементами. Если я перемещу всплывающую подсказку к родителю, у меня не будет позиции элемента (td), поэтому я могу показать всплывающую подсказку поверх элемента wright.

— 12.03.2019 14:38

Если ваша структура не такая, как показано, вам нужно создать полный минимальный воспроизводимый пример, чтобы мы могли понять любые другие факторы, которые могут влиять на css, особенно когда речь идет о z-индексах и контексте стека.

— 12.03.2019 15:26

@Pete вот немного усложненная версия моего кода: jsfiddle.net/7k2zf0c9 Итак, для каждого текста (td) должна быть подсказка.

— 12.03.2019 15:38

@Sheki Да, вы видите с этим макетом, я мог бы сразу сказать, что вам понадобится решение js, так как любое решение css будет хаком (чтобы оно отображалось над предыдущим и следующим, но родитель отображался ниже следующего)

— 12.03.2019 16:02

12.03.2019 14:04