CSS定位 CSS 定位机制
CSS中一共有三种基本定位机制:普通流、浮动、绝对定位。
如果不进行专门指定,所有的标签都在普通流中定位。
块级元素从上到下一个接一个的排列,框之间的垂直距离是由框的垂直外边距计算出来。
行内框在一行中水平布置。可以使用水平内边距、边框和外边距来调整它们之间的间距。
通过position属性,我们可以选择4种不同类型的定位,这会影响元素框生成的方式。
包括4个属性值:static、relative、absolute、fixed
static是position属性的默认值,无特殊定位。均为正常定位。
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;}
效果图:
解释:
HTML代码:
啦啦啦啦啦<h1 class="h1">我是h1大标题</h1>
CSS代码:
.h1 { position: absolute; top: 100px; left: 100px;}
没有设置CSS样式的样子:
设置了CSS样式后的样子:
解释:
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
<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><div class="a">1</div><div class="b">2</div><div class="c">3</div>
关于界面元素框偏移
偏移前:
偏移后:
<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> <!-- position:absolute;默认是相对于窗口进行定位 --> <div class="wrap"> <div class="inner"> <div class="content"></div> </div> </div>