CSS的三种定位方式介绍

在CSS中一共有N种定位方式，其中，static ,relative,absolute三种方式是最基本最常用的三种定位方式。他们的基

本介绍如下。

static默认定位方式
relative相对定位，相对于原来的位置，但是原来的位置仍然保留
absolute定位，相对于最近的非标准刘定位，原来的位置消失，被后边的位置所顶替

下面先演示相对定位的案例

  
    
	
    
    
    

  
  
  
  
    
内容一
    
内容二
    
内容三
    
内容四
  

.style1{
	width: 300px;
	height: 100px;
	background-color: gray;
	border: 1px solid red;
	float: left;
	margin-left: 10px;
}

#special{
	position: relative;/*这里使用了相对定位,left意思是在原来的位置向左移动多少*/
	left: 40px;/*左侧坐标变大，向右移动*/
	top: 200px;
}

替他的位置，效果图

然后是绝对定位。其中，HTML代码不变，至改变了CSS代码

.style1{
	width: 300px;
	height: 100px;
	background-color: gray;
	border: 1px solid red;
	float: left;
	margin-left: 10px;
}

#special{
	position: absolute;/*这里使用了相对定位,left意思是在原来的位置向左移动多少*/
	left: 40px;/*左侧坐标变大，向右移动*/
	top: 200px;
}

标准流为标准进行配对。

效果如如下