在CSS中,我们可以使用“position:absolute;”来实现绝对定位。绝对定位在几种定位方式中使用最为广泛,因为它能够很精确地把元素定位到任意你想要的位置。

一个元素变成了绝对定位元素,这个元素就完全脱离文档流了,绝对定位元素的前面或后面的元素会认为这个元素并不存在,此时这个元素浮于其他元素上面,已经完全独立出来了。

语法:

position: absolute; top: 像素值; bottom: 像素值; left: 像素值; right: 像素值;

说明:

position:absolute;是结合top、bottom、left和right这4个属性一起使用的,其中position:absolute使得元素成为绝对定位元素,接着使用top、bottom、left和right这4个属性来设置元素相对浏览器的位置。

top、bottom、left和right这4个属性不一定全部都用到,一般只会用到其中两个。默认情况下,这4个值的参考对象是浏览器的4条边。

对于前面3种定位方式,我们现在可以总结了:默认情况下,固定定位和绝对定位的位置是相对于浏览器而言,而相对定位的位置是相对原始位置而言

举例:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> #father { padding:15px; background-color:#0C6A9D; border:1px solid silver; } #father div{padding:10px;} #son1{background-color:#FCD568;} #son2 { background-color: hotpink; /*在这里添加son2的定位方式*/ } #son3{background-color: lightskyblue;} </style> </head> <body> <div id="father"> <div id="son1">box1</div> <div id="son2">box2</div> <div id="son3">box3</div> </div> </body> </html>

浏览器预览效果如下图所示。

我们为第2个div元素加入绝对定位,CSS代码如下:

#son2 { position:absolute; top:20px; right:40px; }

此时在浏览器中效果如下图所示。

分析:

从这个例子可以看出,绝对定位元素的top和right是相对于浏览器而言的。在绝对定位中,top、right、bottom、left这4个属性,我们也是只需要其中两个属性就确定一个元素的相对位置。