如何修复div，使其不会随着溢出-y而移动

Question

我总共有三个包装器，其中有一个div的文本为No Data found！以下是我想要实现的：用户应该能够在表中垂直和水平滚动，并且该文本应该保持固定。这也有效！但现在我在浏览器中用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。它将解决您的问题，然后根据需要进行定位。

如果在<table>元素内定位No data found，并将表定位为relative，将No data found定位为absolute，会更好更容易。现在您可以根据您的桌子位置轻松定位

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