实现返回顶部按钮时页脚消失

Question

尝试将 "back to top" 移至页脚上方的右侧时，页脚消失。我想尝试让按钮位于页脚上方。在我实现 "back to top" 按钮之前，我也很难正确对齐它，因为它没有覆盖底部页面的左侧。

我也试图找到解决方案，但我发现的解决方案使用 javascript/jquery，我必须只使用 html 和 css 来解决这个问题。

编辑：我删除了不必要的东西，留下了 table，因为我认为这就是导致问题的原因，因为它在较小的屏幕上无法很好地缩放。也忘了前面提到它也会导致导航栏 space 留在右上角，这就是为什么我也把它留在里面的原因。

    <!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="test.css" type="text/css" rel="stylesheet">

<a name="top"></a>
<div class="nav">
  <input type="checkbox" id="nav-check">
  <div class="nav-header">
    <div class="nav-title">
      <a href="index.html" class="active">Link1</a>
    </div>
  </div>
  <div class="nav-btn">
    <label for="nav-check">
      <span></span>
      <span></span>
      <span></span>
    </label>
  </div>

  <div class="nav-links">
 <a href="#">Link2</a>
<a href="#">Link3</a>
<a href="#">Link4</a>
  </div>
</div>

<h1>Comments</h1>

  <table id = "table">
<tr>
    <th>Name</th>
     <th>Type</th>
     <th>Description</th>  
</tr>
<tr>
     <td>html</td>
    <td>Element</td>
   <td>fdsfdddddddddddd ddddddd dffdfds fdfds</td>
</tr>
<tr>
    <td>html</td>
    <td>Element</td>
    <td>fdsfdddddddddddd ddddddd dffdfds fdfds</td>
</tr>
  <tr>
     <td>html</td>
    <td>Element</td>
    <td>fdsfdddddddddddd ddddddd dffdfds fdfds</td>
</tr>

</table>
 </td>
</tr>
<div class="btopbutton">
<a href="#top">Back to top</a>
<div>
<div class="footer">
<p><span> Website | Website | Copyright  2019</span></p>
 <a href="#"> Link 1 </a> | <a href="#">Link 2</a> | <a href="#">Link 3</a> | <a href="#">Link 4</a></div>

</div>

</body></html>

    @charset "UTF-8";

/*set background for whole page*/
html {
  background-color: #26734d; 
   scroll-behavior: smooth;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;}
    /*--start of nav bar--*/

* {
  box-sizing: border-box;
}

 .nav {
 /* height: 50px;*/
  width: 100%;
  background-color: #4d4d4d;
  position: relative;
}

.nav > .nav-header {
  display: inline;
}

.nav > .nav-header > .nav-title {
  display: inline-block;
  font-size: 22px;
  color: #fff;
  padding: 10px 10px 10px 10px;
}

.nav > .nav-btn {

  display: none;
}

.nav > .nav-links {
  display: inline;
  float: center;
  font-size: 18px;
}

.nav > .nav-links > a {
  display: inline-block;
  padding: 13px 10px 13px 10px;
  text-decoration: none;
  color: #efefef;
   text-transform: uppercase;
}

.nav > .nav-links > a:hover {
   font-weight: bold;
 /* background-color: rgba(0, 0, 0, 0.3);*/
}
:any-link {
color: #efefef; 
text-decoration: none;
   text-transform: uppercase;
  font-size: 18px;

}
:any-link:hover { 
font-weight: bold;
cursor: pointer;
}

.nav > #nav-check {
  display: none;
}


/*--end of nav bar--*/

.heading1{
color:#FFFFFF;
}



/* Style the validation */
#validation{
  text-align:center;
    padding: 10px 10px;   

}


.footer {
  text-align: center;
  padding-top:20px;
  padding-bottom: 20px;
  background-color: #1B1B1B;
  color: #FFFFFF;
  text-transform: uppercase;
  font-weight: lighter;
  letter-spacing: 2px;
  border-top-width: 2px;
  padding: 2px;
  color:#ffffff;
    width: 100%;
    position: absolute;
      font-weight: 200;
}


/*back to top button*/
.btopbutton
{
position: fixed;
bottom: 0;
  right: 0;
text-align:right;
}

/*--table in comments section --*/
#table{
    border: solid 1px black;
    border-collapse: collapse;
    width:100%;
    text-align: center;
}

#table th{
    border: solid 1px black;
    border-collapse: collapse;
    background-color: inherit;
}

#table td{
    border: solid 1px black;
     background-color: inherit;
    border-collapse: collapse;
}
/*--end of table in the comments --*/



div.desc {
  padding: 15px;
  text-align: center;
}

* {
  box-sizing: border-box;
}

.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}

@media only screen and (max-width: 700px) {
  .responsive {
    width: 49.99999%;
    margin: 6px 0;

  }
}

@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

/* Moved Content Below Header */
.content {
margin-top:50px;
}
}

@media (max-width:600px) {
  .nav > .nav-btn {
    display: inline-block;
    position: absolute;
    right: 0px;
    top: 0px;
  }
  .nav > .nav-btn > label {
    display: inline-block;
    width: 50px;
    height: 50px;
    padding: 13px;
  }
  .nav > .nav-btn > label:hover,.nav  #nav-check:checked ~ .nav-btn > label {
    background-color: rgba(0, 0, 0, 0.3);
  }
  .nav > .nav-btn > label > span {
    display: block;
    width: 25px;
    height: 10px;
    border-top: 2px solid #eee;
  }
  .nav > .nav-links {
       display: block;
    width: 100%;
    background-color: #333;
    height: 0px;
    transition: all 0.3s ease-in;
    overflow-y: hidden;
  }
  .nav > .nav-links > a {
    display: block;
    width: 100%;
  }
  .nav > #nav-check:not(:checked) ~ .nav-links {
    height: 0px;
  }
  .nav > #nav-check:checked ~ .nav-links {
    height: auto;
    overflow-y: auto;
  }
}


@media (max-width:300px){
#table p{
  width:100%;
  text-align: justify;
}
#table ul{
  width: 58%
}
#table tr{
  display: inline-flex;
  width: 100%;
}
#table th{
  width: 100%;
}
}

Answer 1

我建议如下：

.nav {
 /* height: 50px;*/
  width: 100%;
  background-color: #4d4d4d;
  position: relative;
}

此处有相对导航 'parent'，因此子项的绝对位置将放置在该上下文中。谈到 .footer，你已经放置了绝对位置，但没有相对父级，没有底部，右边 0 等。所以对于页脚尝试制作另一个 div 名称 class .wrapper 定位相对于文档的流程，然后在该父位置内放置您的页脚 div。按钮固定位置也会发生同样的情况。

Answer 2

从你向左或向右的任何地方.. 对于页脚隐藏，请遵循样式..

css

.btopbutton {
  right:0; /*for right side*/
  z-index: 999;
}

如果你想从左边..

css

.btopbutton {
  left: 0; /*for left side*/
  z-index: 999;
}

实现返回顶部按钮时页脚消失

footer disappearing when implementing the back to top button

html

css

footer