CSS 定位
CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。
定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
relative
相对定位
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。buttom如果为正数，则向上移动，right如果为正数，则向左移动
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<style type="text/css">
h2.pos_left
{
position:relative;
left:-20px
}
h2.pos_right
{
position:relative;
right:20px;
}
.pos_top{position: relative;
bottom: 40px;
}
</style>
</head>
<body>
<h2>这是位于正常位置的标题</h2>
<h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
<h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
<h2 class="pos_top">这个标题</h2>
<h2 class="pos_bottom">这个标题</h2>
</body>
</html>
absolute
absolute绝对定位，相对于当前窗口的位置，有top，left，right，bottom
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<style type="text/css">
*{padding: 0;margin: 0;}
.d1{width: 100px;height: 100px;background: red;
position:absolute;
left: 20px;
top: 20px;
}
</style>
</head>
<body>
<div class="d1"></div>
</body>
</html>
点我
上面的div元素距离左边20px，距离上边20px，如果我们想距离顶部20px；右边20px，怎么办呢？我们可以把那两个参数替换掉就可以了
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<style type="text/css">
*{padding: 0;margin: 0;}
.d1{width: 100px;height: 100px;background: red;
position:absolute;
right: 20px;
bottom: 20px;
}
</style>
</head>
<body>
<div class="d1"></div>
</body>
</html>
这样是不是我们的div就固定在右下角了呢？如果内容过多会不会随着滚动条滚动？ 来动手测试一下
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<style type="text/css">
*{padding: 0;margin: 0;}
.d1{width: 100px;height: 100px;background: red;
position:absolute;
right: 20px;
bottom: 20px;
}
.d2{height: 4000px;}
</style>
</head>
<body>
<div class="d2">
<div class="d1"></div>
</div>
</body>
</html>
View Code
经过测试发现，会随着滚动条滚动，如果想要固定在某一个位置，就要用到fixed属性了
fixed
fixed固定定位，你想让它在哪个位置就在哪个位置，来，我们直接把上面的定位改为fixed试试
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<style type="text/css">
*{padding: 0;margin: 0;}
.d1{width: 100px;height: 100px;background: red;
position:fixed;
right: 20px;
bottom: 20px;
}
.d2{height: 4000px;}
</style>
</head>
<body>
<div class="d2">
<div class="d1"></div>
</div>
</body>
</html>
刷新看看，这样是不是就实现了我们的需求，想一想，其他网站右下角有一个回到顶部的按钮，我们一点就回到了顶部，其实就是用固定定位和js做的
inherit
inherit继承，继承父元素的定位
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<style type="text/css">
*{padding: 0;margin: 0;}
.d1{width: 100px;height: 100px;background: red;
position:inherit;
right: 20px;
bottom: 20px;
}
.d2{height: 4000px;}
body{
height: 4000px;}
</style>
</head>
<body>
<div class="d2">
<div class="d1"></div>
</div>
</body>
</html>
发现上面的代码和没设置position没什么区别，因为我们没有给它的父元素设置定位方式，我们给父元素加上定位方式在来看看
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<style type="text/css">
*{padding: 0;margin: 0;}
.d1{width: 100px;height: 100px;background: red;
position:inherit;
left: 20px;
top: 20px;
}
.d2{height: 100px;width: 100px;
background: green ;
position: fixed;
left: 100px;
top: 100px;}
body{
height: 4000px;}
</style>
</head>
<body>
<div class="d2">
<div class="d1"></div>
</div>
</body>
</html>
View Code
代码解释：class="d1"的标签的定位方式为继承，而它的父元素class=d2的定位属性为固定定位fixed，所以也继承了固定定位
z-index
所有定位的方式都是有层级的，先写的定位的元素会被后写的定位的元素覆盖，例如上面继承的，红色的将绿色的覆盖掉了一点，如果要想让绿色的覆盖掉红色的，就要用到z-index了
z-index属性值有三个，分别为auto（默认值）、inherit（继承）、number（具体的数值）
z-index可以设置元素的叠加顺序，但依赖定位属性
z-index大的元素会覆盖掉z-index小的元素
z-index为auto的元素不参与层级比较
z-index被普通流中的元素覆盖
我们先来看一下不加z-index属性的效果
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<style type="text/css">
*{padding: 0;margin: 0;}
.d2{height: 100px;width: 100px;
background: green ;
position: absolute;
}
.d1{width: 100px;height: 100px;background: red;
position:absolute;
left: 20px;
top: 20px;
}
body{
height: 4000px;}
</style>
</head>
<body>
<div class="d2"></div>
<div class="d1"></div>
</body>
</html>
发现红色的把绿色的遮挡住了，那我们给绿色的加上z-index
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<style type="text/css">
*{padding: 0;margin: 0;}
.d2{height: 100px;width: 100px;
background: green ;
position: absolute;
z-index: 1;
}
.d1{width: 100px;height: 100px;background: red;
position:absolute;
left: 20px;
top: 20px;
}
body{
height: 4000px;}
</style>
</head>
<body>
<div class="d2"></div>
<div class="d1"></div>
</body>
</html>
View Code
因为默认的z-index为0，当我们给绿色的设置为z-index为1的时候，绿色的就在上面了
