Before elaborating on my issue, I'd like to clarify what I'm working on. I am developing a website where users are in a simulated "elevator". Upon pressing any of the 6 elevator buttons, the doors open and display information in the blank space. However, when attempting to input content into this space, the divs "rightdoor" and "leftdoor" shift downwards, causing the information to remain ontop....
My queries are: How can I prevent the div from shifting down? And how can I position one div behind another?
@-webkit-keyframes leftdooropen {
from {
right: 0%;
}
to {
right: 50%;
}
}
@-webkit-keyframes rightdooropen {
from {
left: 50%;
}
to {
left: 100%;
}
}
@-webkit-keyframes leftdoorclose {
from {
right: 50%;
}
to {
right: 0%;
}
}
@-webkit-keyframes rightdoorclose {
from {
left: 100%;
}
to {
left: 50%;
}
}
body, html {
height: 100%;
margin: 0;
}
#leftdoor {
background-image: url("Door.png");
position: relative;
/* Full height */
height: 100%;
width: 50%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#rightdoor {
position: relative;
left: 50%;
background-image: url("Door.png");
height: 100%;
width: 50%;
bottom: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
vertical-align: top;
}
.lframe {
position: relative;
height: 100%;
width: 10px;
left: 100%;
z-index: 1;
}
.rframe {
position: relative;
height: 100%;
width: 10px;
right: 0%;
z-index: 2;
}
.myButton {
background: #3498db;
background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
background-image: -moz-linear-gradient(top, #3498db, #2980b9);
background-image: -ms-linear-gradient(top, #3498db, #2980b9);
background-image: -o-linear-gradient(top, #3498db, #2980b9);
background-image: linear-gradient(to bottom, #3498db, #2980b9);
-webkit-border-radius: 28;
-moz-border-radius: 28;
border-radius: 28px;
font-family: Arial;
color: #ffffff;
font-size: 20px;
padding: 10px 20px 10px 20px;
text-decoration: none;
}
.myButton:hover {
background: #3cb0fd;
background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
text-decoration: none;
}
#celevator {
z-index: -2;
position: relative;
}
#1 {
position: relative;
bottom: 1000px;
}<html>
<link rel="stylesheet" href="Design.css">
<head>
</head>
<body>
<div id="leftdoor">
<img class="lframe" src="frame.png">
</div>
<div id="1">
</div>
<div id="rightdoor">
<img class="rframe" src="frame.png">
<button class="myButton" style="position:relative; left:80%; bottom:75%;" onclick="openelevator(this)">1</button>
<a href="#" class="myButton" style="position:relative; left:71.9%; bottom:68%;" onclick="openelevator(this)">2</a>
<a href="#" class="myButton" style="position:relative; left:63.8%; bottom:61%;" onclick="openelevator(this)">3</a>
<a href="#" class="myButton" style="position:relative; left:55.9%; bottom:54%;" onclick="openelevator(this)">4</a>
<a href="#" class="myButton" style="position:relative; left:48%; bottom:47%;" onclick="openelevator(this)">5</a>
<a href="#" class="myButton" style="position:relative; left:38%; bottom:35%;" onclick="openelevator(this)">Earth</a>
<a href="#" class="myButton" style="position:relative; left:25%; bottom:27%;" onclick="openelevator(this)">> | <</a>
</div>
</body>