在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个属性,我们也是只需要其中两个属性就确定一个元素的相对位置。