绝对定位的概念:
生成绝对定位的元素,相对于static定位以外的第一个父元素进行定位。
position:absolute
1.对绝对定位的理解:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
*{
margin:0;
padding:0;
}
.test{
width:100px;
height:100px;
background: pink;
position:absolute;
left:20px;
top:50px;
margin-left:-50px; /*该div在前面left,top的基础上再上下左右移动(可正可负)*/
margin-top:-50px;
}
.test1{
position:absolute;
}
</style>
</head>
<body>
<div class="test">
带有绝对定位的div元素块(position:absolute)
</div>
<p class="test1">测试1</p>
<p class="test2">测试2</p>
</body>
</html>
2.div水平垂直居中:
方法一:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
*{
margin:0;
padding:0;
}
.test{
width:120px;
height:120px;
background: pink;
position:absolute;
/*div水平垂直居中*/
margin:auto;
left:0;
right:0;
top:0;
bottom:0;
}
</style>
</head>
<body>
<div class="test">
带有绝对定位的div元素块(position:absolute)
</div>
<p class="test1">测试1</p>
<p class="test2">测试2</p>
</body>
</html>
解释:利用绝对定位可以将要居中的元素脱离文档流
margin:auto 默认只会计算左右边距。而上下如果设置为auto时默认是取0.也就是说,margin:auto和margin:0 auto 在一般情况下没有区别,不能实现垂直居中。
方法二:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
*{
margin:0;
padding:0;
}
.test{
width:100px;
height:100px;
background: pink;
border:5px solid black;
position:absolute;
left:50%;
top:50%;
transform: translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
-o-transform:translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="test">
带有绝对定位的div元素块(position:absolute)
</div>
<p class="test1">测试1</p>
<p class="test2">测试2</p>
</body>
</html>
解释:该方式是利用CSS3 属性的垂直水平居中方法;
translate
函数当中使用百分比是以该元素的内容区、补白(padding
)、边框(border
)为标准计算的;