在html中将一层覆盖到另一层
我有一个html页面，基本上说有两个div。在第一个div中，我有一个login按钮，当单击该按钮时，应该会在第二个div上打开一个重叠的框架 例如，您可以在这里看到，当单击myRyanair按钮时，一个帧出现在第二个div上，然后再次单击时返回 我不熟悉html/angular，正在尝试一些东西，如果听起来太天真，请原谅我 以下是我的html代码：-在html中将一层覆盖到另一层,html,css,angularjs,Html,Css,Angularjs,我有一个html页面，基本上说有两个div。在第一个div中，我有一个login按钮，当单击该按钮时，应该会在第二个div上打开一个重叠的框架 例如，您可以在这里看到，当单击myRyanair按钮时，一个帧出现在第二个div上，然后再次单击时返回 我不熟悉html/angular，正在尝试一些东西，如果听起来太天真，请原谅我 以下是我的html代码：- <!DOCTYPE html> <html lang="en" ng-app="musicPlayer">
<!DOCTYPE html>
<html lang="en" ng-app="musicPlayer">
<head>
<meta charset="UTF-8">
<title>
</title>
<link rel="stylesheet" type="text/css" href="home.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.5/angular.min.js"></script>
<script type="text/javascript" src="angular-js.js"></script>
</head>
<body ng-controller="MusicPlayer as music">
<div id="div1">
<first-tab></first-tab>
<div ng-include="music.displayLoginPage()"></div>
</div>
<div id="div2" >
Search Bar
</div>
<div id="div3">div3</div>
</body>
</html>
<div>
<div id="nameOfSite">
<h1>GrooveHunt</h1>
</div>
<div class="loginKeys">
<a href="" style="color: white" ng-click="music.setLoginPage()">Login</a>
<a href="" style="color: white" id="signUp">Sign Up</a>
</div>
</div>
这里提供一些代码，您可以通过在css中使用z索引来实现这一点。一定要为你的div设定位置。z索引越高=越靠前。z索引似乎起作用了：）如果你需要一个更“奇特”的解决方案，就试试吧
<div>
<div id="nameOfSite">
<h1>GrooveHunt</h1>
</div>
<div class="loginKeys">
<a href="" style="color: white" ng-click="music.setLoginPage()">Login</a>
<a href="" style="color: white" id="signUp">Sign Up</a>
</div>
</div>
<div id="loginPage">
<div>
Do u have liking for music sign up now?
</div>
<div>
</div>
</div>
#div1{
height:10vh;
background-color: darkblue;
}
#div2{
height:60vh;
background-color: white;
}
#div3{
height:30vh;
background-color: darkblue;
}
#nameOfSite{
color: white;
float: left;
font-size:15px;
}
.loginKeys{
margin-left:85%;
font-size:22px;
}
#signUp{
margin-left:20px;
}
#loginPage{
border:2px solid darkblue;
width: 100%;
height:200px;
background-color: red;
}