<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="__PUBLIC__/css/css.css" rel="stylesheet">
<title>标题</title>
<script src="__PUBLIC__/static/jquery-2.1.1.min.js"></script>
<script src="__PUBLIC__/static/layer/layer.js"></script>
<script type="text/javascript">
function openNav() {
document.getElementById("mySidenav").style.width = "98%";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
<style type="text/css">
body {
font-family: "Lato", sans-serif;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #17202A;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
text-align:center;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #7B7D7D;
display: block;
transition: 0.3s;
}
.sidenav a:hover{
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 20px;
font-size: 36px;
margin-left: 50px;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
.linear{
width:100px;
height:100px;
border-radius:50px;
}
.table {
text-align: center;
margin-top: -30px;
z-index:50px;
}
.iframe{
z-index: -100;
}
</style>
</head>
<body>
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<img src="__PUBLIC__/img/{$Think.session.vipname_img}" class="linear" />
</hr>
<a href="{:U('#')}">{$Think.session.vipname_username}</a>
<a href="#">N: {$user.vpp_e} A</a>
</hr>
<a href="#" id="buy">MA</a>
</hr>
<a href="{:U('/admin/img')}">图片</a>
</hr>
<a href="{:U('Public/logout')}">退出</a>
</hr>
</div>
<div class="fy">
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰</span>
</div>
<br>
<div class="table">
<iframe frameborder="0" src="https://www.baidu.com" width="100%" height="100%" >
</iframe>
</div>
</div>
</body>
</html>
怎么使用margin-top:-50px; 不遮住左上方菜单按钮
或者使用其他实现，求实例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="__PUBLIC__/css/css.css" rel="stylesheet">
<title>标题</title>
<script src="__PUBLIC__/static/jquery-2.1.1.min.js"></script>
<script src="__PUBLIC__/static/layer/layer.js"></script>
<script type="text/javascript">
function openNav() {
document.getElementById("mySidenav").style.width = "98%";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
<style type="text/css">
body {
font-family: "Lato", sans-serif;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #17202A;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
text-align:center;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #7B7D7D;
display: block;
transition: 0.3s;
}
.sidenav a:hover{
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 20px;
font-size: 36px;
margin-left: 50px;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
.linear{
width:100px;
height:100px;
border-radius:50px;
}
.table {
text-align: center;
position: absolute;
top: 0;
width: 100%;
}
.iframe{
z-index: -100;
}
</style>
</head>
<body>
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<img src="__PUBLIC__/img/{$Think.session.vipname_img}" class="linear" />
</hr>
<a href="{:U('#')}">{$Think.session.vipname_username}</a>
<a href="#">N: {$user.vpp_e} A</a>
</hr>
<a href="#" id="buy">MA</a>
</hr>
<a href="{:U('/admin/img')}">图片</a>
</hr>
<a href="{:U('Public/logout')}">退出</a>
</hr>
</div>
<div class="fy">
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰</span>
</div>
<br>
<div class="table">
<iframe frameborder="0" src="https://www.baidu.com" width="100%" height="100%" >
</iframe>
</div>
</div>
</body>
</html>