篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用absolute实现的后台布局，包括小图标定位，菜单弹出等完整版相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css"/>
<style>
.pg-header{
height: 48px;
background-color: #1d9ad6;
color: white;
min-width: 1180px;
line-height: 48px;
}
.pg-header .icon{
padding: 0px 20px;
font-size: 20px;
}
.pg-header .icon .span{
display: inline-block;
line-height: 2px;
border-radius: 50%;
/*width: 20px;*/
/*height: 20px;*/
padding: 10px;
background-color: red;
}
.pg-header .icon:hover{
background-color: #3bae56;
}
.pg-content{}
.pg-footer{}
.pg-content .menu{
position: absolute;
top:48px;
left:0;
bottom: 0;
width: 200px;
background-color:red ;
}
.pg-content .content{
position: absolute;
/*background-color: green;*/
top: 48px;
right: 0;
bottom: 0;
left: 200px;
min-width: 980px;
overflow: auto;
z-index: 10;
}
.left{
float:left;
}
.right{
float: right;
}
.pg-header .logo{
width: 200px;
background-color: blue;
text-align: center;
}
.pg-header .user{
width: 100px;
height: 48px;
background-color: blue;
margin-right:60px;
/*text-align: center;*/
}
.pg-header .user:hover{
background-color: white;
/*text-align: center;*/
}
.pg-header .user:hover .b{
display: block;
/*text-align: center;*/
}
.pg-header .user .a img {
width: 40px;height: 40px;margin-top:5px;border-radius: 50%;
}
.pg-header .user .b {
position: absolute;top: 48px;right: 0;background-color: white;color:black;z-index: 20;
display: none;
}
.pg-header .user .b .a{
display: block;
width: 100px;
}
</style>
</head>
<body style="margin: 0">
<div class="pg-header">
<div class="logo left">
大世界
</div>
<div class="user right" style="position: relative">
<a class="a" href="#">
<img src="网页前标1.jpg" />
</a>
<div class="b" >
<a class="a">东临碣石</a>
<a class="a">东临碣石</a>
</div>
</div>
<div class="icon right">
<i class="fa fa-envelope-open-o"></i>
<span>5</span>
</div>
<div class="icon right">
<i class="fa fa-flag "></i>
<span class="span">5</span>
</div>
</div>
<div class="pg-content">
<div class="menu left">asd</div>
<div class="content left" >
<div style="background-color: #2f96b4">
<p style="margin: 0">asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p></div>
</div>
</div>
<div class="pg-footer"></div>
</body>
</html>