在开发过程中会遇到需要引入其他页面,并在其他页面上层悬浮div
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style>
#box {
height: 100%;
width: 100%;
max-width: 640px;
background-color: aqua;
position: fixed;
left: 50%;
right: 50%;
margin-left: -320px;
margin-right: -320px;
}
#paybox {
background-color: aliceblue;
width: 100%;
height: 300px;
max-width: 320px;
position: fixed;
left: 50%;
right: 50%;
margin-left: -160px;
margin-right: -160px;
margin-top: -160px;
top: 50%;
}
#floatW {
text-align: center;
top: 50%;
display: block;
position:relative;
transform: rotateY(-50%);
}
</style>
<body>
<!--引入框架-->
<div id="box">
<iframe src="iframe.html" width="100%" height="100%" scrolling="no" marginheight="0" marginwidth="0"></iframe>
</div>
<!-- 悬浮窗-->
<div id="paybox">
<span id="floatW">
我是充值悬浮窗
</span>
</div>
</body>
</html>
iframe.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
#gamebox{
width:100%;
height:100%;
position: absolute;
background: burlywood;
}
</style>
<body>
<div id="gamebox">
</div>
</body>
</html>