如何修复 div 使其不随溢出-y 移动？

Question

我总共有三个包装器，其中有一个带有文本 No Data found 的 div！这是我想要实现的：用户应该能够在表格中垂直和水平滚动，并且该文本应该保持固定。这也有效！但是现在我在浏览器中使用 overflow-y 向下滚动到包装器之外，因此文本会随之向下移动。我该如何解决这个问题？

我的代码：

.wrapper {
  background-color: grey;
  height: 200px;
  margin-bottom: 10px;
  overflow-y: auto
}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

th {
  border: 1px solid #dddddd;
  text-align: center;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}


  .no-data-found-message1 {
    position: fixed;
    top: 25%;
    left: 45%;
  }

  .no-data-found-text1 {
    font-size: 18px;
  }
  
  .no-data-found-message2 {
    position: fixed;
    top: 85%;
    left: 45%;
  }

  .no-data-found-text2 {
    font-size: 18px;
  }
  
  .no-data-found-message3 {
    position: fixed;
    top: 120%;
    left: 45%;
  }

  .no-data-found-text3 {
    font-size: 18px;
  }

<div class="wrapper">
<table>
  <tr>
    <th>First Column</th>
    <th>Second Column</th>
    <th>Third Column</th>
     <th>Fourth Column</th>
    <th>Five Column</th>
  </tr>
</table>
<!-- Show message, if no data found -->
        <div class="no-data-found-message1">
          <span class="no-data-found-text1">
            No data found!
          </span>
        </div>
</div>

<div class="wrapper">
<table>
  <tr>
    <th>First Column</th>
    <th>Second Column</th>
    <th>Third Column</th>
     <th>Fourth Column</th>
    <th>Five Column</th>
  </tr>
</table>
<!-- Show message, if no data found -->
        <div class="no-data-found-message2">
          <span class="no-data-found-text2">
            No data found!
          </span>
        </div>
</div>

<div class="wrapper">
<table>
  <tr>
    <th>First Column</th>
    <th>Second Column</th>
    <th>Third Column</th>
     <th>Fourth Column</th>
    <th>Five Column</th>
  </tr>
</table>
<!-- Show message, if no data found -->
        <div class="no-data-found-message3">
          <span class="no-data-found-text3">
            No data found!
          </span>
        </div>
</div>

我在 JSFiddle 的工作：https://jsfiddle.net/0wbo3xLj/35/

Answer 1

将fixed 位置改为absolute。

* {
  margin: 0;
  padding: 0;
  outline: 0;
  box-sizing: border-box;
}

.wrapper {
  position: relative;
  height: 200px;
  overflow-y: auto;
  margin-bottom: 10px;
  background-color: grey;
}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

th {
  border: 1px solid #dddddd;
  text-align: center;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

.fixed-message {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

<div class="wrapper">
  <table>
    <tr>
      <th>First Column</th>
      <th>Second Column</th>
      <th>Third Column</th>
      <th>Fourth Column</th>
      <th>Five Column</th>
    </tr>
  </table>
  <div class="fixed-message">
    No Data Found!
  </div>
</div>

<!-- SECOND -->
<div class="wrapper">
  <table>
    <tr>
      <th>First Column</th>
      <th>Second Column</th>
      <th>Third Column</th>
      <th>Fourth Column</th>
      <th>Five Column</th>
    </tr>
  </table>
  <div class="fixed-message">
    No Data Found!
  </div>
</div>

<!-- THIRD -->

<div class="wrapper">
  <table>
    <tr>
      <th>First Column</th>
      <th>Second Column</th>
      <th>Third Column</th>
      <th>Fourth Column</th>
      <th>Five Column</th>
    </tr>
  </table>
  <div class="fixed-message">
    No Data Found!
  </div>
</div>

Answer 2

使用位置 absolute 而不是 fixed 。它会解决你的问题，然后根据需要定位。

如果您将 No data found 放置在 <table> 元素中并将表格的位置设置为 relative 并将 No Data found 设置为 @987654325，将会更好更容易@ .现在您可以根据自己的桌子位置轻松定位它了

.wrapper {
  background-color: grey;
  height: 200px;
  margin-bottom: 10px;
  overflow-y: auto
}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

th {
  border: 1px solid #dddddd;
  text-align: center;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}


  .no-data-found-message1 {
    position: absolute;
    top: 25%;
    left: 45%;
  }

  .no-data-found-text1 {
    font-size: 18px;
  }
  
  .no-data-found-message2 {
    position: absolute;
    top: 85%;
    left: 45%;
  }

  .no-data-found-text2 {
    font-size: 18px;
  }
  
  .no-data-found-message3 {
    position: fixed;
    top: 120%;
    left: 45%;
  }

  .no-data-found-text3 {
    font-size: 18px;
  }

<div class="wrapper">
<table>
  <tr>
    <th>First Column</th>
    <th>Second Column</th>
    <th>Third Column</th>
     <th>Fourth Column</th>
    <th>Five Column</th>
  </tr>
</table>
<!-- Show message, if no data found -->
        <div class="no-data-found-message1">
          <span class="no-data-found-text1">
            No data found!
          </span>
        </div>
</div>

<div class="wrapper">
<table>
  <tr>
    <th>First Column</th>
    <th>Second Column</th>
    <th>Third Column</th>
     <th>Fourth Column</th>
    <th>Five Column</th>
  </tr>
</table>
<!-- Show message, if no data found -->
        <div class="no-data-found-message2">
          <span class="no-data-found-text2">
            No data found!
          </span>
        </div>
</div>

<div class="wrapper">
<table>
  <tr>
    <th>First Column</th>
    <th>Second Column</th>
    <th>Third Column</th>
     <th>Fourth Column</th>
    <th>Five Column</th>
  </tr>
</table>
<!-- Show message, if no data found -->
        <div class="no-data-found-message3">
          <span class="no-data-found-text3">
            No data found!
          </span>
        </div>
</div>