使用定位可以将元素随心所欲的摆放到任意位置
流：元素有序的排列的队伍
后3种定位本质一样，都是相对于某目标产生偏移
浮动：让块左右排列
三、相对、绝对、固定定位
1.区别和联系：
相同点：设置偏移量的方式一样
语法： left:10px;
规律：向中心方向偏移为正，反方向偏移为负
不同点：设置偏移量的参考对象不一样
1） 相对定位：以自己原来的位置为目标，元素不脱离流（位置不释放） （图片抖动）
代码：
position: relative; left: 2px; right: -2px; li:hover { position: relative; left: 2px; right: -2px; }
2) 绝对定位： （将一个元素覆盖到另一个元素上）
-以带有position的父辈为目标
-都有position则采用就近原则
-都没有position则以body为目标
-元素脱离流（释放位置）
步骤：在父辈上加position->设置定位 position:absolute
<!DOCTYPE html>
<html> <head> <meta charset="UTF-8"> <title>Demo03</title> <style> div { width: 318px; height: 318px; border: 3px solid red; /*不设置偏移量，只是为了便于子元素以此为目标做绝对定位 */ position: relative; } p { position: absolute; left: 0; bottom: 10px; width: 318px; background: #FFF; text-align: center; } </style> </head> <body> <div> <img src="../images/3.jpg"/> <p>郁郁葱葱【】【】【】</p> </div> </body> </html>
3）固定定位：
-以浏览器的窗口为目标
-永远挂在窗口的固定位置不动
-元素脱离流（释放位置）
代码：position：fixed;
<style>
div { border: 1px solid #ccc; width: 50px; text-align: center; position: fixed; bottom: 10px; right: 5px; } </style>
<body> <h1>罗技鼠标</h1> <p>very good</p> <p>xxxxxxxxxxxxxxxxxxxxxx</p> <p>xxxxxxxxxxxxxxxxxxxxxx</p> <p>xxxxxxxxxxxxxxxxxxxxxx</p> <p>xxxxxxxxxxxxxxxxxxxxxx</p> <p>xxxxxxxxxxxxxxxxxxxxxx</p> <div> <!-- 顶部锚点：# --> <a href="#">TOP</a> </div> </body>
四、如何选择定位方式
排除法：1.固定定位 2.浮动定位 3.相对定位（偏移量小） 4.绝对定位（应用率高）
例子：“操作成功” 移动到中间位置
1.设置div
<!-- 提示（消息区） --> <div class="message"> <img src="../img/close.png"/> <p>操作成功</p> </div>
2.设置父元素（添加position）
.content { position: relative; }
3.设置message为绝对定位
/*派生，使优先级变高*/ .content .message { position: absolute; left: 200px; top: 100px; width: 450px; height: 100px; } 4.设置图片为右浮动、外边距
.message img { float: right; margin: 5px; } 5.改变“操作成功”的位置
.message p { margin-left: 38px;/*外边距*/ line-height: 100px;/*行高*/ } 6.改整个框的边框，背景色等
.content .message { border: 1px solid #F68A8A; background: #FDECEC url(../img/ok.png) no-repeat 10px 42.5px; } 7.靠近图片添加手型
/*图标变手型*/ .message img:hover { cursor: pointer; }
