（一）定位的含义
通过定位可以让一个元素位于页面的任意位置，定位的思想认为所有元素都是“框”，框分为两个：块块、行内框。定位的分类：静态定位、相对定位、绝对定位、固定定位
（二）定位分类
定位的分类：静态定位、相对定位、绝对定位、固定定位
1.position:static定位的默认值，元素没有任何的附加效果
2.position:relative相对定位
a.相对定位的参照物是自身原有位置
b.如果一个元素设置了position：relative，但是没有告诉它位移的方向和尺度，它将保持原有位置不变
c.如果要向右移动可以设置left，如果要向下移动可以设置top,如果要向左移动，可以设置right，如果要向上移动可以设置bottom
d.一个元素做了相对定位其远原有位置并不丢失，换句话说该元素仍处于标准文档流中
3.position:absolute，绝对定位的参照物是具有定位属性的祖先元素（离它最近的祖先元素）
a.元素有祖先元素，但是祖先元素没有定位
b.元素有祖先元素，且祖先元素有定位
注意：
(a.一个元素如果设置了绝对定位，但是没有设置top/bottom/left/right四个属性，那么这个元位置保持不变，但是它会从标准文档流中脱离，其在标准文档流中的原有位置丢失
(b.可以设置top /bottom/left /right四个属性
(c.一个元素如果做绝对定位，那么首先要看它的祖先元素有没有定位，如果祖先元素没有定位，该元素的位移参照是body
，如果它祖先元素有定位，那么它的位移参照是祖先元素
(d.一个元素左绝对定位时，如果它的祖先元素都有定位，那么它的参照是离它最近的那个祖先元素
4.position:fixed，位移参照始终是body无论祖先元素有没有定位
多应用于页面中的广告图片
（三）z-index:调节元素的堆叠次序，属性值就是数值，没有单位 ,值越大元素越靠上
元素默认的堆叠顺序是受HTML标签排列顺序决定，写在后面的在上面显示，写在前面的在下面显示
z-index属性的前提是该元素必须具有定位
（四）应用
1.淘宝目录
<head>
<meta charset="UTF-8">
<title>定义列表的应用1</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
width: 700px;
margin: 0 auto;
}
h3{
font-size: 14px;
background: yellowgreen;
height: 30px;
width: 130px;
line-height: 30px;
color: #fff;
border-radius: 5px 5px 0 0;
padding-left: 5px;
}
div{
width: 400px;
height: 200px;
border: 1px solid yellowgreen;
font-size: 12px;
padding: 10px 0 0 20px;
}
a{
text-decoration: none;
color: #000;
}
dt a{
margin-right: 15px;
}
dd a{
margin-right: 10px;
}
dd{
margin: 10px 0 30px 0;
}
</style>
</head>
<body>
<h3>所有类目</h3>
<div>
<dl>
<dt>
<a href="#">二手家具</a>
<a href="#">家具百货</a>
</dt>
<dd>
<a href="#">床</a>
<a href="#">柜子</a>
<a href="#">桌椅</a>
<a href="#">沙发</a>
<a href="#">沙发</a>
<a href="#">沙发</a>
</dd>
<dt>
<a href="#">二手家具</a>
<a href="#">家具百货</a>
</dt>
<dd>
<a href="#">床</a>
<a href="#">柜子</a>
<a href="#">桌椅</a>
<a href="#">沙发</a>
<a href="#">沙发</a>
<a href="#">沙发</a>
<a href="#">沙发</a>
</dd>
</dl>
</div>
</body>
2.新闻目录
<head>
<meta charset="UTF-8">
<title>定义列表的应用2</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
div{
width: 100%;
margin: 0 auto;
font-size: 12px;
}
dt{
font-weight: bold;
}
dt,dd{
float: left;
margin-right: 20px;
}
dl{
width: 200px;
border-right: 1px dashed #ccc;
float: left;
margin-right: 20px;
}
body dl:last-of-type{
border: none;
}
</style>
</head>
<body>
<div>
<dl>
<dt>新闻</dt>
<dd>军事</dd>
<dd>评论</dd>
<dd>图片</dd>
<dt>体育</dt>
<dd>购彩</dd>
<dd>NBA</dd>
<dd>中超片</dd>
<dt>娱乐</dt>
<dd>电影</dd>
<dd>电视</dd>
<dd>音乐</dd>
</dl>
<dl>
<dt>新闻</dt>
<dd>军事</dd>
<dd>评论</dd>
<dd>图片</dd>
<dt>体育</dt>
<dd>购彩</dd>
<dd>NBA</dd>
<dd>中超片</dd>
<dt>娱乐</dt>
<dd>电影</dd>
<dd>电视</dd>
<dd>音乐</dd>
</dl>
<dl>
<dt>新闻</dt>
<dd>军事</dd>
<dd>评论</dd>
<dd>图片</dd>
<dt>体育</dt>
<dd>购彩</dd>
<dd>NBA</dd>
<dd>中超片</dd>
<dt>娱乐</dt>
<dd>电影</dd>
<dd>电视</dd>
<dd>音乐</dd>
</dl>
<dl>
<dt>新闻</dt>
<dd>军事</dd>
<dd>评论</dd>
<dd>图片</dd>
<dt>体育</dt>
<dd>购彩</dd>
<dd>NBA</dd>
<dd>中超片</dd>
<dt>娱乐</dt>
<dd>电影</dd>
<dd>电视</dd>
<dd>音乐</dd>
</dl>
<dl>
<dt>新闻</dt>
<dd>军事</dd>
<dd>评论</dd>
<dd>图片</dd>
<dt>体育</dt>
<dd>购彩</dd>
<dd>NBA</dd>
<dd>中超片</dd>
<dt>娱乐</dt>
<dd>电影</dd>
<dd>电视</dd>
<dd>音乐</dd>
</dl>
<dl>
<dt>新闻</dt>
<dd>军事</dd>
<dd>评论</dd>
<dd>图片</dd>
<dt>体育</dt>
<dd>购彩</dd>
<dd>NBA</dd>
<dd>中超片</dd>
<dt>娱乐</dt>
<dd>电影</dd>
<dd>电视</dd>
<dd>音乐</dd>
</dl>
</div>
</body>
3.手风琴菜单
<head>
<meta charset="UTF-8">
<title>手风琴菜单</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
a{
text-decoration: none;
color: #000;
display: block;
}
ul{
width: 500px;
margin: 0 auto;
list-style: none;
}
li{
float: left;
}
li>a{
width: 28px;
height: 90px;
background: green;
text-align: center;
}
li>a,div{
float: left;
}
div{
background: pink;
width: 90px;
height: 90px;
font-size: 14px;
padding: 10px 0 0 10px;
display: none;
}
li:hover div{
display: block;
}
li div a:hover{
color: #f00;
}
</style>
</head>
<body>
<ul>
<li>
<a href="#">吉林省</a>
<div>
<a href="#">长春市</a>
<a href="#">吉林市</a>
<a href="#">四平市</a>
</div>
</li>
<li>
<a href="#">辽宁省</a>
<div>
<a href="#">沈阳市</a>
<a href="#">盘锦市</a>
<a href="#">大连市</a>
</div>
</li>
<li>
<a href="#">黑龙江省</a>
<div>
<a href="#">齐齐哈尔市</a>
<a href="#">哈尔滨市</a>
<a href="#">黑河市</a>
</div>
</li>
</ul>
</body>