Вопросы Теги

Абсолютный div был покрыт переведенным элементом

Привязать событие к родительскому объекту, который уже существует: 

$(document).on("click", "selector", function() {
    // Your code here
});
1
задан Temani Afif 28 March 2019 в 01:13
поделиться

1 ответ

Просто увеличьте z-index родительского элемента 

th, td {
  padding: 20px
}

#cell {
  background-color: lightblue;
}

.parent {
  position: relative;
  z-index:2;
}

.translate {
  transform: translate(0,0);
}

.overflow {
  position: absolute;
  bottom: -20px;
  left: 0;
}
<html>
  <head></head>  
  <body>
    <table border="1">
    <thead>
       <tr>
         <th><p>Hi</p></th>
         <th class="parent translate">
           <p>Hello</p>
           <div class="overflow">Overflow text</div>
         </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>hello cell</td>
        <td class="translate" id="cell">hello cell</td>
      </tr>
    </tbody>
    </table>    
  </body>
</html>

Вы столкнулись с логическим результатом порядок рисования , где преобразованный элемент закрашивается после позиционированного, так как он появляется позже в дереве DOM и так как не указано z-index.

Также обратите внимание, что добавление z-index к всплывающей подсказке не будет работать, потому что transform создает контекст стека, поэтому z-index поместит всплывающую подсказку в этот контекст стека, который уже расположен ниже #cell. [1120 ] 

th, td {
  padding: 20px
}

#cell {
  background-color: lightblue;
}

.parent {
  position: relative;
}

.translate {
  transform: translate(0,0);
}

.overflow {
  position: absolute;
  bottom: -20px;
  left: 0;
  z-index:9999;
}
<html>
  <head></head>  
  <body>
    <table border="1">
    <thead>
       <tr>
         <th><p>Hi</p></th>
         <th class="parent translate">
           <p>Hello</p>
           <div class="overflow">Overflow text</div>
         </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>hello cell</td>
        <td class="translate" id="cell">hello cell</td>
      </tr>
    </tbody>
    </table>    
  </body>
</html>

Дополнительные вопросы по теме:

'transform3d' не работает с положением: фиксированные дочерние элементы

Почему элементы с любым значением z-index никогда не могут покрыть его дочерний элемент?

У меня есть позиция, но z index не работает

0
ответ дан Temani Afif 28 March 2019 в 01:13
поделиться