меню в ячейке таблицы не отвечает на z-index - PullRequest
Новая
       18

меню в ячейке таблицы не отвечает на z-index

0 голосов
/ 30 августа 2018

У меня есть таблица, аналогичная приведенной здесь: https://codepen.io/roberttaraya/pen/QVGRqg

анимированный GIF таблицы

HTML 

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>

</head>

<body>
  <div class="container">

  <table id="example">
    <thead>
      <tr>
        <th>Actions</th>
        <th>First name</th>
        <th>Last name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
        <th>Extn.</th>
        <th>E-mail</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <button class="actions1">show links</button>
          <ul class="actions-list actions1">
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
          </ul>
        </td>
        <td>Tiger</td>
        <td>Nixon</td>
        <td>System Architect</td>
        <td>Edinburgh</td>
        <td>61</td>
        <td>2011/04/25</td>
        <td>$320,800</td>
        <td>5421</td>
        <td>t.nixon@datatables.net</td>
      </tr>
      <tr>
        <td>
          <button class="actions2">show links</button>
          <ul class="actions-list actions2">
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
          </ul>
        </td>
        <td>Garrett</td>
        <td>Winters</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>63</td>
        <td>2011/07/25</td>
        <td>$170,750</td>
        <td>8422</td>
        <td>g.winters@datatables.net</td>
      </tr>
      <tr>
        <td>
          <button class="actions3">show links</button>
          <ul class="actions-list actions3">
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
          </ul>
        </td>
        <td>Ashton</td>
        <td>Cox</td>
        <td>Junior Technical Author</td>
        <td>San Francisco</td>
        <td>66</td>
        <td>2009/01/12</td>
        <td>$86,000</td>
        <td>1562</td>
        <td>a.cox@datatables.net</td>
      </tr>
      <tr>
        <td>
          <button class="actions4">show links</button>
          <ul class="actions-list actions4">
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
          </ul>
        </td>
        <td>Cedric</td>
        <td>Kelly</td>
        <td>Senior Javascript Developer</td>
        <td>Edinburgh</td>
        <td>22</td>
        <td>2012/03/29</td>
        <td>$433,060</td>
        <td>6224</td>
        <td>c.kelly@datatables.net</td>
      </tr>
      <tr>
        <td>
          <button class="actions5">show links</button>
          <ul class="actions-list actions5">
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
          </ul>
        </td>
        <td>Airi</td>
        <td>Satou</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>33</td>
        <td>2008/11/28</td>
        <td>$162,700</td>
        <td>5407</td>
        <td>a.satou@datatables.net</td>
      </tr>
      <tr>
        <td>
          <button class="actions6">show links</button>
          <ul class="actions-list actions6">
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
          </ul>
        </td>
        <td>Brielle</td>
        <td>Williamson</td>
        <td>Integration Specialist</td>
        <td>New York</td>
        <td>61</td>
        <td>2012/12/02</td>
        <td>$372,000</td>
        <td>4804</td>
        <td>b.williamson@datatables.net</td>
      </tr>
      <tr>
        <td>
          <button class="actions7">show links</button>
          <ul class="actions-list actions7">
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
          </ul>
        </td>
        <td>Herrod</td>
        <td>Chandler</td>
        <td>Sales Assistant</td>
        <td>San Francisco</td>
        <td>59</td>
        <td>2012/08/06</td>
        <td>$137,500</td>
        <td>9608</td>
        <td>h.chandler@datatables.net</td>
      </tr>
      <tr>
        <td>
          <button class="actions8">show links</button>
          <ul class="actions-list actions8">
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
          </ul>
        </td>
        <td>Rhona</td>
        <td>Davidson</td>
        <td>Integration Specialist</td>
        <td>Tokyo</td>
        <td>55</td>
        <td>2010/10/14</td>
        <td>$327,900</td>
        <td>6200</td>
        <td>r.davidson@datatables.net</td>
      </tr>
      <tr>
        <td>
          <button class="actions9">show links</button>
          <ul class="actions-list actions9">
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
          </ul>
        </td>
        <td>Colleen</td>
        <td>Hurst</td>
        <td>Javascript Developer</td>
        <td>San Francisco</td>
        <td>39</td>
        <td>2009/09/15</td>
        <td>$205,500</td>
        <td>2360</td>
        <td>c.hurst@datatables.net</td>
      </tr>
      <tr>
        <td>
          <button class="actions10">show links</button>
          <ul class="actions-list actions10">
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
          </ul>
        </td>
        <td>Sonya</td>
        <td>Frost</td>
        <td>Software Engineer</td>
        <td>Edinburgh</td>
        <td>23</td>
        <td>2008/12/13</td>
        <td>$103,600</td>
        <td>1667</td>
        <td>s.frost@datatables.net</td>
      </tr>
      <tr>
        <td>
          <button class="actions11">show links</button>
          <ul class="actions-list actions11">
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
          </ul>
        </td>
        <td>Jena</td>
        <td>Gaines</td>
        <td>Office Manager</td>
        <td>London</td>
        <td>30</td>
        <td>2008/12/19</td>
        <td>$90,560</td>
        <td>3814</td>
        <td>j.gaines@datatables.net</td>
      </tr>
      <tr>
        <td>
          <button class="actions12">show links</button>
          <ul class="actions-list actions12">
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
          </ul>
        </td>
        <td>Quinn</td>
        <td>Flynn</td>
        <td>Support Lead</td>
        <td>Edinburgh</td>
        <td>22</td>
        <td>2013/03/03</td>
        <td>$342,000</td>
        <td>9497</td>
        <td>q.flynn@datatables.net</td>
      </tr>
  </tbody>
  </table>

  </div>

</body>
</html>

1011 * CSS * 

.container {
  height: 300px;
  width: 600px;
  background-color: tan;
  overflow:auto;
}

table {
  border-collapse: collapse;
}

table tbody tr td, table thead tr th {
  border: 1px solid black;
  height: 50px;
  width: 1px;
  white-space: nowrap;
}

td:nth-child(1), th:nth-child(1) {
  position:sticky;
  position:-webkit-sticky;
  left: 0px;
  z-index:1;
  background-color:grey;
}

td:nth-child(2), th:nth-child(2) {
  position:sticky;
  position:-webkit-sticky;
  left: 74px;
  z-index:1;
  background-color:grey;
}

table thead tr th {
  background-color: red;
  position: sticky;
  position: -webkit-sticky;
  top: 0px;
  z-index: 5;
}

table thead tr th:nth-child(1), 
table thead tr th:nth-child(2) {
  z-index: 6;
}

ul {
  display: none;
}

li{
  position: relative;
}

.actions-list {
  position: absolute;
  border: 1px solid black;
  height: 200px;
  width: 100px;
  top: 20px;
  left: 15px;
  z-index:10;
  background-color: pink;
}

JS 

$("button").click(function(e) {
  el = $("ul." + this.className).toggle()
})

Таблица имеет липкий заголовок и липкие левые столбцы. В одном из левых столбцов у меня есть меню, которое переключается, открывая ссылку / кнопку. Когда я переключаю открытое меню, я хочу, чтобы оно отображалось над ячейками таблиц и за их пределами, но, как видно из примера с кодовым блоком, меню скрыто за ячейками таблицы, независимо от того, какой я установил z-индекс.

Есть ли способ добиться желаемого поведения?

Ответы [ 2 ]

0 голосов
/ 30 августа 2018

Это не очень красиво, но работает: 

$("button").click(function(e) {
  el = $("ul." + this.className).toggle();
  
  // add these lines
  $('button').parent().removeClass('above');
  $(this).parent().addClass('above');
})
/* add this to css */
td.above {
    z-index: 10;
}
0 голосов
/ 30 августа 2018

удалить позицию из класса списка действий. 

.actions-list {
  /*position: absolute;*/
  border: 1px solid black;
  height: 200px;
  width: 100px;
  /*top: 20px;*/
  /*left: 15px;*/
  z-index:10;
  background-color: pink;
}

Надеюсь, это поможет!

...