1.定位
定位，允许定义元素框相对于正常位置（或父元素、亦或浏览器窗口）所处的位置。css中提出了
浮动，浮动不完全是定位、也绝非正常流布局。
css定位机制：普通流、浮动、绝对定位。默认，所有框都在普通流中定位。使用属性position，定义四种类型的定位。
★static
元素框正常产生（default）
★relative
元素框偏移
★absolute
脱离正常流，定位后生成一个块级框；相对页面静止，覆盖于正常流之上
★fixed
脱离正常流，较之浏览器静止，覆盖于正常流之上
<!-- 测试 -->
.elementPos{
margin: 0px;
padding: 0px;
text-align: center;
background: palevioletred;
border: dashed palegreen;
line-height: 4em;
width: 17em;
height: 6em;
position: absolute;
bottom: 30px;
right: 30px;
}
1.1.定位：相对定位
相对于默认位置
.element_pos{
position: relative;
left:33px;
}1.2.定位：绝对定位
相对于页面的位置
position: absolute; top:533px; right:5px;
1.3.定位：固定定位
固定于浏览器相对位置
position:fixed; bottom:15px; left:1em;
1.4.溢出：滚动展示
overflow: scroll;
1.5.覆盖：Z-index
改变默认覆盖顺序，放到正常流下边。
position:absolute; left:0px; top:0px; z-index:-1
1.6.透明度：opacity
取值范围0-1
opacity 0.3;
1.7.浮动
1.7.1.浮动
浮动框，剥离于正常的文档普通流。浮动，可以向右、向左移动，直到卡住（外框、浮动框）。
1.7.2.清理
由于元素浮动，导致元素堆积。需要阻止这样的堆积，可以应用clear属性。clear属性取值：left、right、both、none，表示框的某边不要紧挨着浮动框（none是默认值，inherit从父元素继承float属性的值）。
2.实例
2.1.简单布局
一个不用表格实现的网页布局，使用 float 属性
<html>
<head>
<style type="text/css">
div.container
{
width:100%;
margin:0px;
border:1px solid gray;
line-height:150%;
}
div.header
{
padding:0.5em;
color:white;
background-color:gray;
/*clear:left;*/
}
div.footer
{
padding:0.5em;
color:white;
background-color:gray;
clear:left;
}
h1.header
{
padding:0;
margin:0;
}
div.left
{
float:left;
width:160px;
margin:0;
padding:1em;
}
div.content
{
margin-left:190px;
border-left:1px solid gray;
padding:1em;
}
</style>
</head>
<body>
<div class="container">
<div class="header"><h1 class="header">W3School.com.cn</h1></div>
<div class="left"><p>"Never increase, beyond what is necessary, the number
of entities required to explain anything." William of Ockham (1285-1349)</p></div>
<div class="content">
<h2>Free Web Building Tutorials</h2>
<p>W3School.com.cn - The Largest Web Developers Site On The Net!</p>
<p>W3School.com.cn - The Largest Web Developers Site On The Net!</p>
<p>W3School.com.cn - The Largest Web Developers Site On The Net!</p>
</div>
<div class="footer">Copyright 2008 by YingKe Investment.</div>
</div>
</body>
</html>2.2.position
使用 position 属性布局
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/position_relative_absolute.css" /> </head> <body> <div class="returntop"><p>R</p></div> <div class="header"></div> <div class="content"> <p>正文</p> <div class="auto"> <div class="more"> <a href="#"><p>more...</p></a> </div> </div> <div class="auto"> <div class="more"> <a href="#"><p>more...</p></a> </div> </div> <div class="auto"> <div class="more"> <a href="#"><p>more...</p></a> </div> </div> </div> <div class="footer"></div> </body> </html>
样式表，效果在 more, auto 实现相对布局；header,returntop 实现固定布局。
*{
margin: 0;
padding: 0;
border: 0;
}
p{
color: blue;
}
body{
background: darkgray;
width: 100%;
margin: 0px auto;
}
.returntop{
width: 27px;
height: 27;
background: lightseagreen;
position: fixed;
right: 35px;
bottom: 75px;
}
.returntop p{
margin: 0 auto;
text-align: center;
line-height: 19px;
}
.header{
height: 50px;
width: 100%;
position: fixed;
top: 0;
background: chartreuse;
margin: 0px auto;
z-index: 10;
}
.content{
width: 1190px;
margin: 0px auto;
/*background: black;*/
}
.auto{
background: brown;
width: 1170px;
height: 590px;
position: relative;
margin: 20px auto;
padding: 5px;
position: relative;
}
.more{
height: 27px;
width: 63px;
background: blueviolet;
position: absolute;
right: 15px;
top: 21px;
}
.more p{
padding: 5px;
line-height: 19px;
}
