css核心内容之定位

定位这个知识点有难掌握，但是越难掌握我们就要去好好理解，多敲敲代码，自己动手测试一把，我相信大家都能够把它理解消化掉，变成自己的东西。大家以后学习还是多多动手实践，这样才能把理解知识实践化。

不多废话，现在学习定位。

常见的定位就那么4中，4中不多也不少，把它好好理解就等于消化了。

1、static定位（静态的）（默认的【left 和 top 无效】）

2、relative 相对定位

3、absolute 绝对定位

4、fixed 固定的

举列子说明

a、static定位 [static定位（静态的）（默认的）]：

默认的：我先给出HTML 和css文件

HTML文件：

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

css文件：

.div1{
background:green;
float:left;
margin-left:5px;
height:30px;
width:70px;
}

效果图：（原图）

b、relative 相对定位(要求让内容二脱离标准流，采用相对定位，把内容二放在内容三的下面)我们把内容二设置一个id选择器

先看看效果：相对定位是在原来的基础位置上重新定位，虽然它脱离标准流后但是它的空间不能被占用。如大家还不能理解，可以在我的代码基础上自己修改数据进行测试。

HTML文件：

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

css文件：

.div1{
background:green;
float:left;
margin-left:5px;
height:30px;
width:70px;
}

#spe{
position:relative;
top:35px;
left:75px;
}

c、absolute（绝对定位）

效果图：

与原图相比，绝对定位：对该元素最近那个脱离了标准流的元素进行定位，如果没有父元素，则相对body左上角作为标准进行定位

HTML文件未变：

css文件：

.div1{
background:green;
float:left;
margin-left:5px;
height:30px;
width:70px;
}

/* 相对定位
#spe{
position:relative;
top:35px;
left:150px;
}
*/

#spe{
position:absolute; /*绝对定位*/
top:40px;
left:70px;
}

理解这句话：对该元素最近那个脱离了标准流的元素进行定位，如果没有父元素，则相对body左上角作为标准进行定位。

下面我们做一个实验：如图

内容二在一个div中，上图显示这个div已经绝得定位了一次，现在把内容二在这个div（粉红背景中那个）中进行定位，我们把内容二进行absolute（绝对定位）它是怎么移动的，依据谁移动的？

HTML文件：

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

css文件：

.div1{
background:green;
float:left;
margin-left:5px;
height:30px;
width:70px;
}

/* 相对定位
#spe{
position:relative;
top:35px;
left:150px;
}
*/

#spe{
width:300px;
background:pink;
height:100px;
position:absolute;
top:80px;
left:70px;
}

.div2{
background:green;
float:left;
height:30px;
width:70px;

}

现在开始把内容二进行移动：向上移动10px,向左移动20px，主要他移动的方向。

效果图：它是在它的父元素（被包住的那个Div为标准）中移动，而不是以body为标准移动了

css文件：

.div1{
background:green;
float:left;
margin-left:5px;
height:30px;
width:70px;
}

/* 相对定位
#spe{
position:relative;
top:35px;
left:150px;
}
*/

#spe{
width:300px;
background:pink;
height:100px;
position:absolute;
top:80px;
left:70px;
}

.div2{
background:green;
float:left;
height:30px;
width:70px;
position:absolute;
top:10px;
left:20px;
}

所以：从上图看，所谓绝对定位是指，对该元素最近的那个脱离了标准流的元素定位,如果没有父元素(或者有父元素，但是父元素没有脱离标准流)，则相对body左上角定位.

d、固定定位（fixed）

所谓固定定位是指：不管怎样，都是以视图窗口的左上角进行定位

大家还有不能理解的可以把它当作一个小练习自己一边做一边慢慢理解，就能掌握，没有什么难点。

来源：https://www.cnblogs.com/pwm5712/archive/2013/03/09/2951434.html

标签

css

html代码

绝对定位