标签：style blog http color os strong io 2014
很多时候，我们需要对一些元素进行自定义排序、布局等，这是就需要用到CSS的定位属性了，用这些属性对一些元素进行自定义排序、布局等操作，可以改变浏览器默认的死板的排序。
CSS定位的功能很容易理解，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
CSS的定位(position)属性有四种不同的定位类型，从而影响元素框的声称方式。
| 属性 | 描述 | 备注 |
|---|---|---|
| static | 元素框正常生成 |
|
| relative | 元素框偏移某个距离 | 元素仍保持其未定位前的形状，它原本所占的空间仍保留。 |
| absolute | 元素框从文档流完全删除，并相对于其包含块定位 |
|
| fixed | 元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。 |
CSS的定位机制：普通流，浮动，定位
普通流中的元素框的位置是由(X)HTML中的位置决定的。
块级元素从上到下依次排列。
框之间的垂直距离有框的margin属性计算得到，行内元素在一行中水平布局。
定位有相对定位和绝对定位之分。
相对定位，就是要定位的元素会（相对于普通流中的位置）偏移某个距离，元素仍保持其未定位以前的形状，它原本所占用的空间继续保留。移动元素可能会覆盖其他元素。
#box_relative {
position: relative;
left: 30px;
top: 20px;
}
绝对定位，就是将要定位的元素框从普通流中完全删除，并相对与其包含块(可能是文档中另一个元素或者是初始包含块)定位。该元素原先在普通流中所占用的空间会关闭。
#box_relative {
position: absolute;
left: 30px;
top: 20px;
}
绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
注：绝对定位与普通流无关，所以它可以覆盖页面上的其他元素，这时可以通过设置z-index属性来控制这些框的堆放次序。
浮动，可以左右移动元素框，只得到它的边缘碰到包含框或者另一个浮动框为止。浮动的框脱离了普通流。
如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”
在CSS中，我们可以通过float属性来完成浮动效果。
浮动的效果可以用在很多元素中
div{
float:right;
width:120px;
margin:0 0 15px 20px;
padding:15px;
border:1px solid black;
text-align:center;
}
使段落的首字符浮动于左侧，并向这个字符添加样式
span{
float:left;
width:0.7em;
font-size:400%;
font-family:algerian,courier;
line-height:80%;
}
也可以用浮动效果来完成一列具有超链接的菜单
ul{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a{
float:left;
width:7em;
text-decoration:none;
color:white;
background-color:#06C;
padding:0.2em 0.6em;
border-right:1px solid white;
}
CSS自学笔记（7）:CSS定位,布布扣,bubuko.com
标签：style blog http color os strong io 2014
原文地址：http://www.cnblogs.com/lonzhe/p/3875886.html
