CSS定位 CSS 定位机制
css中一共有三种基本定位机制：普通流、浮动、绝对定位。
如果不进行专门指定，所有的标签都在普通流中定位。
块级元素从上到下一个接一个的排列，框之间的垂直距离是由框的垂直外边距计算出来。
行内框在一行中水平布置。可以使用水平内边距、边框和外边距来调整它们之间的间距。
position属性
通过position属性，我们可以选择4种不同类型的定位，这会影响元素框生成的方式。
包括4个属性值：static、relative、absolute、fixed
代码展示
position: static;
static是position属性的默认值，无特殊定位。均为正常定位。
立即学习“前端免费学习笔记（深入）”；
position: reletive;
HTML代码:
<p class="p1"> 我是p1</p><p class="p2"> 我是p2</p><p class="p3"> 我是p3</p>
CSS代码:
.p1 { position: relative; left: 30px;}.p2 { position: relative; right: 30px;}效果图：
解释：
position: absoulte;
HTML代码:
啦啦啦啦啦<h1 class="h1">我是h1大标题</h1>
CSS代码:
.h1 { position: absolute; top: 100px; left: 100px;}没有设置CSS样式的样子：
设置了CSS样式后的样子：
解释：
position: fixed;
HTML代码:
<p class="one"> 我是p one</p><p class="two"> 我是p two</p>
CSS代码:
.one { position: fixed; top: 100px; left: 30px;}.two { position: fixed; top: 50px; right: 30px;}效果展示：
解释：
参考文章：http://www.w3school.com.cn/css/css_positioning.asp
关于界面排布优先级的问题 z-index
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style media="screen"> div{ width: 100px; font-size: 50px; position: absolute; height: 100px; } .a{ background-color: red; left: 0; top: 0; /*设置优先级，数字越大，放置越靠前*/ z-index: 3; } .b{ background-color: blue; left: 40px; top: 40px; z-index: 2; } .c{ background-color: green; left: 80px; top: 80px; z-index: 100; } </style></head><body><div class="a">1</div><div class="b">2</div><div class="c">3</div></body></html>关于界面元素框偏移
偏移前：
偏移后：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .wrap{ width: 300px; height: 300px; border: 1px solid red; margin: 100px; padding: 100px; position: relative; padding-left: 0; } .inner{ width: 200px; height: 200px; background-color: green; padding: 50px; position: relative; } .content{ width: 50px; height: 50px; background-color: red; position: absolute; left: 0; } </style></head><body> <!-- position:absolute;默认是相对于窗口进行定位 --> <div class="wrap"> <div class="inner"> <div class="content"></div> </div> </div></body></html>
