语法：position:absolute;
什么是绝对定位？绝对定位元素是相对于“祖先定位元素”来进行定位！
什么是祖先定位元素？绝对定位元素它会先去查找其父元素是否设置了定位的属性,如果有设置定位的属性,那么它就会相对于其父元素来进行定位;但是如果它的父元素没有设置定位属性,那么它就会去查找其父元素的上一级元素是否设置了定位的属性,如果有设置就相对于其父元素的上一级元素进行定位但是如果没有设置那么会继续往向一级进行查找;如果其祖先元素都没有设置定位属性;那么它会相对于“浏览器窗口”来进行定位！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
width: 600px;
border: 1px solid #f90;
margin: 100px auto;
position: relative;
}
.box div{
width: 100px;
height: 100px;
}
.div1{
background-color: #f00;
}
.div2{
background-color: #0f0;
position: absolute;/*绝对定位属性*/
right: 0px;
top: 0px;
}
.div3{
background-color: #00f;
}
.content{
width: 800px;
border: 1px solid red;
margin: 100px auto;
position: relative;
}
</style>
</head>
<body>
<!-- div.box>div.div$*3 -->
<div class="content"><!-- 最外面盒子验证"子绝父相" -->
<div class="box">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>
</div>
</body>
</html>
问题：如果当前元素的父元素与其爷爷元素都设置了相对定位，那么请回答当前的绝对定位元素它会相对于“谁”来进行定位？
答：当前的绝对定位元素它会相对于其父元素来进行定位，也就是说当绝对定位元素查找到了其祖先元素已经设置了定位的属性就不会再去查找上一级元素。
特点：
●绝对定位元素它脱离了标准文档流;
●绝对定位元素它不再占用空间
●绝对定位元素它会压盖住标准文档流中的元素;
绝对定位元素它会相对于其“祖先定位元素”来进行定位，这里的祖先定位元素可以是相对定位也可以是固定定位还可以是绝对定位,但是我们一般只会给其实祖先定位元素设置相对定位属性。“子绝父相”子元素设置绝对定位父元素设置相对定位.
转载请注明：大灰牛博客 » 绝对定位absolute