思路：
利用定位属性position实现主要内容下含一张大的背景图。
首先，建立一个类名为bg的div用于存放背景图片，该背景图片是这个div下a标签的背景，这样这个背景就可以点击跳转。然后建立和该div为兄弟节点的另一个div，类名为content,类名为content的div用于实现各种具体页面；
要实现背景图片不占位置，使用定位position:absolute;因为如果它占位置，那么具体内容（类名为content的div)就会被挤下去;
同时，因为类名为bg的div不能给宽高，因为position:relative是占位置的。
因为要实现具体内容div在背景图上面，那么其层级就必须比类名为bg的div的层级高，所以给它也来一个定位
position: relative;
主要知识点：
1.
position：relative;在页面占位置；
而position: absolute;在页面中不占位置
2.
当两个标签都是定位,后面的定位层级比前面的高
具体代码：
利用定位属性position实现主要内容下含一张大的背景图。
首先，建立一个类名为bg的div用于存放背景图片，该背景图片是这个div下a标签的背景，这样这个背景就可以点击跳转。然后建立和该div为兄弟节点的另一个div，类名为content,类名为content的div用于实现各种具体页面；
要实现背景图片不占位置，使用定位position:absolute;因为如果它占位置，那么具体内容（类名为content的div)就会被挤下去;
同时，因为类名为bg的div不能给宽高，因为position:relative是占位置的。
因为要实现具体内容div在背景图上面，那么其层级就必须比类名为bg的div的层级高，所以给它也来一个定位
position: relative;
主要知识点：
1.
position：relative;在页面占位置；
而position: absolute;在页面中不占位置
2.
当两个标签都是定位,后面的定位层级比前面的高
具体代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>背景</title>
<style type="text/css">
.main{
margin-top:150px;
}
.bg{
position: relative;
}
.bg a{
width:100%;
height: 604px;
position: absolute;
top:0;
left: 0;
background: url(banner.jpg) no-repeat top center;
}
.content{
width: 1210px;
height: 500px;
margin: 0 auto;
background-color: #afe1af;
position: relative;
}
</style>
</head>
<body>
<div class="main">
<div class="bg">
<a href="#"></a>
</div>
<div class="content"></div>
</div>
</body>
</html>效果图：
