定位层的概念：
1. 定位层是由html元素（标签）形成的一个特殊的box盒子。
2. 其重点在于“定位”，而html元素（标签）的定位方式由CSS来控制。通常情况下，html元素（标签）默认的定位方式叫做“静态定位”，存在于普通文档流中，而定位层则是指的那些修改了定位方式的box，即非静态定位的box。
3. 定位层的“定位”需要根据参照对象来实现定位的位置。
4. 定位层的主要作用是用来实现小范围内容元素的排版和定位。
定位属性
原理：完全脱离页面文档流，独立于立体层面的z轴之上。从立体z轴的角度看，定位层在浮动元素之上。
作用：规定html元素的定位类型。
特点：1. 完全脱离页面文档流，独立于立体层面的z轴之上。和float一样都脱离了默认文档流，但float元素和默认文档流之间会相互产生影响。而定位层元素则完全独立，互不干扰。
2. 让元素inline-block化。例如一个div标签默认宽度是100%显示的，但是一旦变成abosolute绝对定位，则默认独占一行的宽度就会变成自适应内部元素的宽度。通常当我们将html元素设置成了定位层之后，就需要指定其宽度和高度。
当html元素（标签）被设置成定位层（非static）之后，可以激活定位相关的属性设置。
这4个定位控制属性均可以使用负值，同方向有冲突时，以top、left优先。
z-index的值是指定顺序关系，因此是number数字形式，没有单位。
z-index的值允许设置负值。当值为负值时，定位层处于普通文档流之下，会被覆盖。
绝对定位和相对定位的区别
absolute元素完全脱离默认文档流，不保留占位空间。
relative元素完全脱离默认文档流，但仍然保留在默认文档流中的占位空间。
实际应用方案
将relative相对层（父级，父级的目的都是为了给子级一个参照对象）和absolute绝对层（子级）结合一起使用，实现内容元素的重叠或位移效果。
相对层+绝对层的应用技巧
1. 在页面中给某个元素（父级对象）设置相对定位，使其成为所包含的子级对象的定位参照物。通常不设置其具体定位位置，保留其占据默认文档流控件的特性，不妨碍整体布局。
2. 相对层对象的内部，添加子级对象设置绝对定位，然后用相关定位属性控制其位置，以实现重叠或位移效果。
实例1：定位层页面广告位实例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
* { margin:0; padding:0;}
ul li { list-style:none; width:250px; float:left; margin:10px;}
.vedio-list div { position:relative;height:145px; margin:0 auto;}
.vedio-list li #img1 { width:250px; height:140px; position:absolute;}
.vedio-list li #img2 { width:65px; height:65px; border-radius:50%; position:absolute; bottom:0; left:0; border:3px white solid;}
.vedio-list li b { margin:0 auto; position:absolute; bottom:5px; right:5px; font-size:14px; line-height:20px; font-size:16px; color:#CCC;}
.vedio-list li p { margin:0 auto; text-align:start; line-height:20px; font-size:20px; color:#333; width:250px; }
</style>
</head>
<body>
<ul class="vedio-list">
<li >
<div>
<a href="#" target="_blank"><img id="img1" src="ruyi.jpg" alt="视频标题替换文本"></a>
<a href="#" target="_blank"><img id="img2" src="add.png" alt=""></a>
<b>1080p</b>
</div>
<p>如懿传PK延禧攻略：白羊如懿battle摩羯魏璎珞竟如此精彩</p>
</li>
<li >
<div>
<a href="#" target="_blank"><img id="img1" src="ruyi.jpg" alt="视频标题替换文本"></a>
<a href="#" target="_blank"><img id="img2" src="add.png" alt=""></a>
<b>1080p</b>
</div>
<p>如懿传PK延禧攻略：白羊如懿battle摩羯魏璎珞竟如此精彩</p>
</li>
<li >
<div>
<a href="#" target="_blank"><img id="img1" src="ruyi.jpg" alt="视频标题替换文本"></a>
<a href="#" target="_blank"><img id="img2" src="add.png" alt=""></a>
<b>1080p</b>
</div>
<p>如懿传PK延禧攻略：白羊如懿battle摩羯魏璎珞竟如此精彩</p>
</li>
</ul>
</body>
</html>效果图：
实例2：定位层页面广告位实例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>固定广告位演示</title>
<style>
body { background:yellow; height:2000px;}
.ad { position:fixed; right:0; bottom:100px;}/*fixed绝对定位是以浏览器窗口为参照对象*/
.ad-two { position:absolute; left:0; bottom:100px;}/*absolute绝对定位是以body标签为参照对象的*/
</style>
</head>
<body>
<div class="ad">
<img src="icon.png" alt="">
</div>
<div class="ad-two">
<img src="icon.png" alt="">
</div>
</body>
</html>