如何防止按钮重叠其他元素？

Question

here is a simplified version of my webpage. 这是我网页的简化版。 I am experiencing an issue where my buttons ( tags) are overlapping my main h1 element. 我遇到一个问题，我的按钮（标签）与我的主要h1元素重叠。 How can I fix this, so they do not overlap? 如何解决此问题，使它们不会重叠？ I believe that the issue is being caused because I have set the position of the div #MOVE to fixed. 我相信是由于我将div #MOVE的位置设置为固定而引起的。 However, I need this due to my animated navigation bar. 但是，由于我的动画导航栏，我需要这样做。

HTML: HTML：

<!DOCTYPE html>
<html>
<head>
    <link href="main.css" rel="stylesheet" type="text/css">
    <script src="jquery-1.10.2.min.js">
    </script>
    <script src="main.js">
    </script>
    <title>A'S COFFEE</title>
</head>
<body>
    <div id="MOVE">
            <h1 class="logoone">COFFEE.</h1>
            <h1 class="logotwo">BETTER WITH A'S</h1>
    </div>
            <div class="centeralign">
                <a class="button" href="place.html" id="btn1">Want to Place<br>
                an Order?</a><br>
                <a class="button" href="#" id="btn2">View Orders?</a>
         </div>
    <footer></footer>
</body>
</html>

CSS: CSS：

h1{
  color: #e5b78e;
  font-family: Arial;
  font-size: 100pt;
  padding: 0px;
  margin: 0px;
display: block;
}

.logoone{
  margin-left: 50px;
  padding-top: 40px;
  letter-spacing: 15px;
}

.logotwo{
  margin-left: 50px;
  margin-bottom: 70px;
  letter-spacing: 15px;
}

body{
  background: url("../img/image3.jpg") no-repeat center center fixed;
  background-size: cover;

}

.button{
  text-decoration: none;
  padding: 30px;
  background-color: white;
  opacity: 0.5;
  font-family: arial;
  font-size: 25pt;
  text-transform: uppercase;
  font-weight: bolder;
  color: #202530;
  border-radius: 1px;
  transition: opacity .2s ease-out;
  margin-top: 10px;
  letter-spacing: 4px;
}

.button a{
  color: rgba(0,0,0,0.5);

}

#btn1{

  margin-top:30px;
  display: inline-block;
  padding-left: 30px;
  padding-right:30px;

}

#btn2{
  margin-top:30px;
  display: inline-block;
  padding-left: 47px;
  padding-right: 47px;
}

.button:hover{
  opacity: 1;
  transition: opacity .2s ease-in;
}

.centeralign{
  text-align: center;
}

br{
  padding: 40px;
}

/* NAV */

#MenuIcon{
    height: 25px;
    width: 50px;
    position: fixed;
    top:50;
    right: 50;
}
#MenuIcon:hover{
    cursor: pointer;
}
#MenuLine{
    height: 4px;
    width: 50px;
    background-color: #e5b78e;
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
    transition: all .3s;
}
#MenuIcon:hover #MenuLine{
    width: 40px;
}
#MenuLine::before{
    content: '';
    height: 4px;
    width: 40px;
    background-color: #e5b78e;
    position: absolute;
    margin-top: 10px;
    transition: all .3s;
}
#MenuIcon:hover #MenuLine::before{
    width: 50px;
}
#MenuLine::after{
    content: '';
    height: 4px;
    width: 40px;
    background-color: #e5b78e;
    position: absolute;
    margin-top: -10px;
    transition: all .3s;
}
#MenuIcon:hover #MenuLine::after{
    width: 50px;
}
#MainMenu{
    height: 100vh;
    width: 300px;
    background-color: #181818;
    -webkit-clip-path:polygon(0 0,100% 0,0% 100%,0% 100%);
    position: fixed;
    top:0;
    left: -300px;
    transition: all .5s ease-in-out;
}
ul{
    list-style: none;
    padding: 0px;
    margin: 0px;
    font-family: arial;
    font-weight: bold;
    color:white;
    text-align: center;
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%,-50%);
}
ul li{
    margin: 20px;
}
ul li:hover{
    cursor: pointer;
}
.line{
    height: 2px;
    width: 150px;
    background-color: white;
    margin-top: 10px;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    transition: all .3s;
}
ul li:hover .line{
    width: 180px;
}
#logo{
    position: absolute;
    top:100;
    left: 50%;
    transform: translate(-50%);
}
#close{
    position: absolute;
    bottom: 150;
    left: 50%;
    transform: translate(-50%);
}
#close:hover{
    cursor: pointer;
}

.LOGO{
  font-size: 4.5em;
}

#MOVE{
  position:fixed;
  top:0%;
  left: 0px;
  transition: all .5s ease-in-out;
  width:85%;
  height: 100%;
}

Answer 1

Try 尝试

#MOVE{
  position:relative;
  top:0%;
  left: 0px;
  transition: all .5s ease-in-out;
  width:85%;
  height: 100%;
}

That sets the position relative to other elements within the page 设置相对于页面内其他元素的位置

如何防止按钮重叠其他元素？

问题描述

1 个解决方案

解决方案1
1 已采纳 2018-04-15 04:59:50

如何防止按钮重叠其他元素？

问题描述

1 个解决方案

解决方案1 1 已采纳 2018-04-15 04:59:50

解决方案1
1 已采纳 2018-04-15 04:59:50