这是我的网页的简化版本。我遇到的问题是我的按钮(标签)与我的主h1元素重叠。我该怎么解决这个问题,所以它们不重叠?我认为这个问题是由于我将div #MOVE的位置设置为固定而引起的。但是,由于我的动画导航栏,我需要这个。
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:
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%;
}
答案 0 :(得分:1)
尝试
<property name="test" expression="get-property('registry','conf:/test.xml')" scope="default" type="OM" />
conf:/test.xml should be the path where your xml is stored.
设置相对于页面中其他元素的位置