悬停元素的堆叠顺序

Question

我正在尝试创建一个显示数据表的悬停元素。

我无法在主表上方制作悬停元素堆栈。

我已经尝试了几件事，包括固定位置和调整 z-index，但一切似乎都破坏了悬停元素的格式和位置（即它需要相对于悬停的文本定位并且需要调整宽度和高度）。

示例：https://jsfiddle.net/f1hLrwvf/

span.own3 {
  background: #FFFFFF;
  opacity: 1;
  border: 1px solid #DCDCDC;
  color: #000000;
  font-size: 12px;
  height: auto;
  width: auto;
  min-width: 300px;
  letter-spacing: 1px;
  line-height: 14px;
  position: absolute;
  text-align: justify;
  top: 20px;
  left: 0px;
  display: none;
  padding: 2px 5px;
  font-family: "Helvetica Neue", Arial, sans-serif;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1), 0 3px 10px 0 rgba(0, 0, 0, 0.09);
}

hover.own2 {
  position: relative;
}

hover.own2:hover span {
  display: block;
}

.table.hoverstatus>tbody>tr:first-child>th {
  border: none;
}

<div style="padding:15px;">

  <div class="shadow p-3 mb-5 bg-white rounded table-responsive" style="border: 1px solid #F0F0F0;font-family: 'Poppins', sans-serif;font-size:14px;">

    <table id="example" class="table table-striped" width="100%">
      <thead>
        <tr>
          <th>Feeling</th>
          <th>Day</th>
        </tr>
      </thead>
      <tbody>

        <tr>
          <td>
            Super
          </td>
          <td>1</td>
        </tr>

        <tr>
          <td>

            <hover class="own2">Great<span class="own3"><table class="table hoverstatus" id="innertable"><tr><th>Row1 Col1</th><th>Row1 Col2</th><th>Row1 Col3</th></tr><tr><td>Row2 Col1</td><td>Row2 Col2</td><td>Row2 Col3</td></tr></table></span></hover>

          </td>
          <td>2</td>
        </tr>
      </tbody>
    </table>

  </div>

</div>

非常感谢任何指导。

Answer 1

使用position: absolute; 代替position: relative; 试试下面的代码：

span.own3 {
  background: #FFFFFF;
  opacity: 1;
  border: 1px solid #DCDCDC;
  color: #000000;
  font-size: 12px;
  height: auto;
  width: auto;
  min-width: 300px;
  letter-spacing: 1px;
  line-height: 14px;
  position: absolute;
  text-align: justify;
  top: 20px;
  left: 0px;
  display: none;
  padding: 2px 5px;
  font-family: "Helvetica Neue", Arial, sans-serif;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1), 0 3px 10px 0 rgba(0, 0, 0, 0.09);
}

hover.own2 {
  position: absolute;
}

hover.own2:hover span {
  display: block;
}

.table.hoverstatus>tbody>tr:first-child>th {
  border: none;
}

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div style="padding:15px;">

<div class="shadow p-3 mb-5 bg-white rounded table-responsive" style="border: 1px solid #F0F0F0;font-family: 'Poppins', sans-serif;font-size:14px;">

  <table id="example" class="table table-striped" width="100%">
    <thead>
      <tr>
        <th>Feeling</th>
        <th>Day</th>
      </tr>
    </thead>
    <tbody>

      <tr>
        <td>
          Super
        </td>
        <td>1</td>
      </tr>

      <tr>
        <td>

          <hover class="own2">Great<span class="own3"><table class="table hoverstatus" id="innertable"><tr><th>Row1 Col1</th><th>Row1 Col2</th><th>Row1 Col3</th></tr><tr><td>Row2 Col1</td><td>Row2 Col2</td><td>Row2 Col3</td></tr></table></span></hover>

        </td>
        <td>2</td>
      </tr>
    </tbody>
  </table>

</div>

</div>

Answer 2

您需要更改一些html 标记以及css

span.own3 {
  background: #FFFFFF;
  opacity: 1;
  border: 1px solid #DCDCDC;
  color: #000000;
  font-size: 12px;
  height: auto;
  width: auto;
  min-width: 300px;
  letter-spacing: 1px;
  line-height: 14px;
  position: absolute;
  text-align: justify;
  top: 100%; // Changed to percentage instead of px
  left: 0px;
  display: none;
  padding: 2px 5px;
  font-family: "Helvetica Neue", Arial, sans-serif;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1), 0 3px 10px 0 rgba(0, 0, 0, 0.09);
}

hover.own2 {
  position: relative;
}

hover.own2:hover span {
  display: block;
}

.table.hoverstatus>tbody>tr:first-child>th {
  border: none;
}
.dd-label {
  padding: 10px 0;
  display: inline-block;
}

<div style="padding:15px;">

<div class="shadow p-3 mb-5 bg-white rounded table-responsive" style="border: 1px solid #F0F0F0;font-family: 'Poppins', sans-serif;font-size:14px;">

  <table id="example" class="table table-striped" width="100%">
    <thead>
      <tr>
        <th>Feeling</th>
        <th>Day</th>
      </tr>
    </thead>
    <tbody>

      <tr>
        <td>
          Super
        </td>
        <td>1</td>
      </tr>

      <tr>
        <td>

          <hover class="own2">

             <!-- wrap this label in a span tag -->
             <span class="dd-label">Great</span>
             <!-- span tag ends -->

<span class="own3"><table class="table hoverstatus" id="innertable"><tr><th>Row1 Col1</th><th>Row1 Col2</th><th>Row1 Col3</th></tr><tr><td>Row2 Col1</td><td>Row2 Col2</td><td>Row2 Col3</td></tr></table></span></hover>

        </td>
        <td>2</td>
      </tr>
    </tbody>
  </table>

</div>

</div>

工作小提琴here

希望对你有帮助:)