定位属性
position 定位属性，检索对象的定位方式；
一、语法：position：static /absolute/relative/fixed
取值：
1、static：默认值，无特殊定位，对象遵循HTML原则；
2、absolute：绝对定位，将对象从文档流中拖离出来，使用left/right/top/bottom等属性相对其最接近的一个并有定位设置的父元素进行绝对定位；如果不存在这样的父对象，则依据html(根元素)，而其层叠通过z-index属性定义；
3、relative ：相对定位，对象不可层叠，将依据right，top，left，bottom（相对定位）
等属性在正常文档流中偏移位置(相对自己原来的位置偏移)
4、fixed：固定定位，对象定位遵从绝对定位方式（absolute）；但是要遵守一些规范（IE6浏览器不支持此定位）根据浏览器的窗口来定义自己的位置。
三、包含块的概念及作用
包含块是绝对定位的基础，包含块就是为决定定位元素提供坐标，偏移和显示范围的参照物，即确定绝对定位的偏移起点和百分比 长度的参考；
默认状态下，html是一个大的包含块，所有绝对定位的元素都是根据根元素来定自己所处的位置和百分比大小的显示的，如果我们定义了包含元素为包含块以后，对于被包含的绝对定位元素来说，就会根据最接近的具有定位功能的上级包含元素来定位自己的显示位置。
定义元素为包含块：给绝对定位元素的父元素添加声明position：relative；
如果我们的父素设置了position:absolute;那么子元素也会相对父元素来定义自己的位置。
三、绝对定位和相对定位的区别
1、参照物不同绝对定位的参照物是包含块，相对定位的参照物是元素本身位置；
2、绝对定位将对象从文档流中拖离出来因此不占据空间，相对定位不破坏正常的文档流顺序无论是否进行移动，元素仍然占据原来的空间。
四、定位元素层叠属性：
z-index : auto | number
检索或设置对象的层叠顺序。
auto：默认值。遵从其父对象
number:无单位的整数值。可为负数
说明：
1）较大 number 值的对象会覆盖在较小 number 值的对象之上。如两个绝对定位对象的此属性具有同样的 number 值，那么将依据它们在HTML文档中声明的顺序层叠。
此属性仅仅作用于 position 属性值为 relative 或 absolute,fixed 的对象。
五)透明属性
IE8以下浏览器写法：filter:alpha(opacity=value);取值范围 1-100
兼容其他浏览器写法：opacity:.value;(value的取值范围0-1,0.1,0.2,0.3-----0.9)
background:rgba(255,255,0,0.5);IE8以上的浏览器，不会影响内容的透明度
五、命名锚点链接的应用
定义：是网页制作中超级链接的一种，又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接，运用相当普遍。
命名锚点链接的应用：
1)命名锚点的作用：在同一页面内的不同位置进行跳转。
2)给元素定义命名锚记名
语法：<标记 id="命名锚记名"> </标记>
3)命名锚记连接
语法：<a href="#命名锚记名称"></a>
定位起点test：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin: 0;padding: 0;}
.box1{width: 300px;height: 300px;border: 5px solid red;margin:50px auto;padding:10px;position: relative;}
.box2{width: 200px;height: 200px;border:5px solid green;position: absolute;top: 0px;left: 0px;}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>效果如图：
即子元素定位位置的起点是父元素border的内边距，与父元素padding无关
test2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin: 0;padding: 0;}
.box1{width: 300px;height: 300px;border: 10px solid red;margin:50px auto;padding:10px;position: relative;}
.box2{width: 200px;height: 200px;border:5px solid green;margin:20px;position: absolute;top: 0px;left: 0px;}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>效果如图：
定位的结束位置是子元素的margin
总结：即定位的子元素的位置计算从父元素的内边界到子元素的margin值
test3:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin: 0;padding: 0;}
.box1{width: 300px;height: 300px;border: 10px solid red;margin:50px auto;padding:10px;position: relative;}
.box2{width: 200px;height: 200px;border:5px solid green;position:absolute;}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
效果如图：
