CSS定位概述

CSS中有三种基本的定位机制：普通流，浮动和绝对定位。

 

1.相对定位：relative

如果对一个元素进行相对定位，它将出现在它所在的位置上，然后可以通过设置垂直或者水平位置，让这个元素“相对于”它原来的位置进行移动，这时元素依然占据原来的位置，但移动后会覆盖其他的元素，可以通过z-index属性来对其显示位置进行设置。

#mybox{

  position:relative;

  left:20px;

  top:20px;

}

2.绝对定位：absolute

相对定位实际上依然是存在文档流中，但绝对定位则会使元素脱离文档流，绝对定位的元素是相对于距离他最近得已定位的祖先元素确定的，如果元素没有已定位的祖先元素，那么它的位置是相对于初始包含块的。

绝对定位同样可以通过z-index来对其设置叠放层次。

3.固定定位：

顾名思义，固定在浏览器某一位置。

4.浮动：float

浮动的框可以左右移动，直至其碰到包含框或另一浮动框的边缘。浮动同样会使元素脱离文档流。

上面说浮动会使元素脱离文档流，文档流中的元素会将其当做不存在，实际上并非如此。当下一个元素存在文本内容时，文本内容会受到浮动元素的影响，会移动留出空间，实际上。创建浮动框使文本围绕图像。即浮动元素旁边的行框被缩短。

要想阻止浮动元素对行框的影响，可以对包含这些行框的元素应用clear属性，其值可以是left,right,both或None;它表示框的那些边不应该挨着浮动框，其实质是浏览器对这些元素添加了一个外边距，使其下降位置到浮动框下边。

通过更多例子来说明浮动和清理,假设有一个图片和文本，你想让图片在左，文本在右，两者被包含在一个div中。

.news{

  background-color:gray;

 border:1px solid black;

}

.news  img{

  float:left;

}

.news p{

 float:right;

 }

<div>

  <img src=""/>

  <p>some thing</p>

</div>

 由于浮动元素不占据空间，所以运行结果如下图：

解决办法通常有三种：

1.添加一个新的div空元素在news里面，并对其设置clear属性，浏览器会自动赋予外边距。如图：

缺点：添加无意义的元素。

 2.也可以对父元素添加overflow:hidden属性，该属性会自动清理包含的任何浮动元素。

缺点：可能会对原来的布局有所影响，例如增加滚动条或截断内容。

3.使用js代码动态控制。