开发者学堂课程【CSS 快速掌握：绝对定位】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/611/detail/9202
绝对定位
内容介绍
一、绝对定位
二、祖先定位元素
三、特点
语法:
position:absolute;
一、绝对定位
什么是绝对定位?
绝对定位元素是相对于“祖先定位元素”来进行定位!
二、祖先定位元素
什么是祖先定位元素?
绝对定位元素它会先去查找其父元素是否设置了定位的属性，如果有设置定位的属性那么它就会相对于其父元素来进行定位;但是如果它的父元素没有设置定位属性，那么它就会去查找其父元素的上一级元素是否设置了定位的属性,如果有设置就相对于其父元素的上一级元素进行定位，但是如果没有设置，那么会继续往向一级进行查找，如果其祖先元素都没有设置定位属性，那么它会相对于“浏览器窗口”来进行定位!
.box div{
width: 100px;
height: 100px;
}
.div1{
background-color: #f00;
.div2{
background-color: #0f0 ;
/*绝对定位属性*/
}
.div3{
background-color: #00f;
}
.box{
width: 600px ;
border: 1px solid #000;
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;
.div2{
background-color: #0f0 ;
/*绝对定位属性* /
position : absolute ;
/*设置定位的坐标*/
right: 0px;
top:0px;
}
div2 是一个绝对定位元素它先去查找其父元素是否设置了定位属性.box 没有设置定位的属性 那么 .div2 它还会去查找其父元素的，上一级元素是否设置了定位属性 .boxp这个元素它设置了相对定位属性现在 .div2 它就会相对于 .boxp 来进行定位
离 .boxp 这个元素的右边0个像素
离 .boxp 这个元素的，上边0个像素
.div3{
background-color: #00f ;
}
. boxp{
width: 800px;
border: 3px solid skyblue;
marain:100px auto;
/*给其设置一个相对定位*/,
position : relative ;
}
问题：如果当前元素的父元素与其爷爷元素都设置了相对定位，那么请回答当前的绝对定位元素它会相对于“谁”来进行定位。
答：当前的绝对定位元素它会相对于其父元素来进行定位，也就是说当绝对定位元素查找到了其祖先元素已经设置了定位的属性就不会查找上一级元素。
三、特点
特点：
绝对定位元素它脱离了标准文档流。
绝对定位元素它不再占用空间。
绝对定位元素它会压盖住标准文档流中的元素。
绝对定位元素他会相对于其祖先定位元素来进行定位，这里的祖先定位元素可以是相对定位也可以是固定定位还可以是绝对定位，但是我们一般只会给其祖先定位元素设置相对定位属性“子绝父相”子元素设置绝对定位父元素设置相对定位。
