Абсолютный div был покрыт переведенным элементом - PullRequest
Новая
       5

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

1 голос
/ 28 марта 2019

У меня есть проблема, которую я пытаюсь решить, но она застряла до сих пор.

У меня есть таблица, на которой я использую небольшую хитрость;этот результат в моей таблице содержит стиль 

"transform: translate(0,0)"

для группы ячеек.Это где проблема возникает.У меня есть всплывающая подсказка, которая требует абсолютного положения для работы.Но пока подсказка полностью скрыта за переведенным элементом.Вы можете увидеть проблему через это: 

th, td {
  padding: 20px
}

#cell {
  background-color: lightblue;
}

.parent {
  position: relative;
}

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

Как я могу решить эту проблему?Я перепробовал все, о чем думал :(. Пожалуйста, помогите

1 Ответ

2 голосов
/ 28 марта 2019

Просто увеличьте 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 к подсказке не будет работать, поскольку преобразование создает контекст стека, поэтому z-index поместит подсказку внутритот контекст стека, который уже находится ниже #cell. 

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-индекса никогда не могут покрыть его дочерний элемент?

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

...