html中绝对定位的⽗级,【CSS学习笔记】绝对定位的⽗类参照
物的确定
今天看CSS定位的课程，了解到⼀个元素要设置绝对定位，需要确定⼀个⽗类或者祖先类参照物，默认是根元素html。
这个默认根元素已经明确，但是祖先类元素参照物如何确定呢？
Just Try
⾸先，给出代码：
html部分
let's begin.
one
two
three
four
five
hello world!
css部分
#one {
background-color: lime;
outline: 2px dashed silver;
width: 50%;
}
#two {
background-color: yellow;
outline: 2px dashed gray;
width: 50%;
height: 75%;
}
#three {
background-color: orange;
outline: 2px dashed blue;
css中的position属性width: 50%;
height: 75%;
}
#four {
background-color: olive;
outline: 2px dashed;
width: 50%;
height: 75%;
}
#five {
background-color: lightblue;
outline: 2px dashed red;
width: 50%;
height: 75%;
}
显⽰如下：
第⼀步，给标记为four的div设置绝对定位
#four {
background-color: olive;
outline: 2px dashed;
width: 50%;
height: 75%;
position: absolute;
right: 5%;
top: 5%;
}
⼩结：可以看到four(后⾯直接将标记的id名称对应div元素)已经脱离原有的⽂档流，在他的⽗类元素three中不占⽤位置了。⽽它的参考物似乎就是浏览器视窗本⾝，也就是html的html元素这个默认的根元素，你看，它离浏览器视窗顶部和右部的距离是不是差不多都是视窗⾼度的5%，⽽且它⾃⾝的宽度、⾼度不也是分别为浏览器视窗的宽⾼的对应50%和75%么。
第⼆步，给one添加position: relative；属性声明
⼩结：这次four被限制到one的边框内了，⽽且宽⾼和top、right都⾃适应到了以one的尺⼨为基准⼤⼩。所以说这个时候，one成了four 绝对定位时的祖先元素参照物。
第三步，在第⼆步的基础上给two添加position: relative；属性声明
⼩结：唉，这次four却被two“擒获”了唉，怎么回事？没错，four做绝对定位的祖先参照物，是设置了相对定位且离four最近的那个祖先类元素。跟four最有“⾎缘关系”，four就会被这个最近的祖先类元素“捕获”。搂到怀⾥唉，掩⾯&羞涩。
第四步，测试⼀下第三步的结论，再给three添加position: relative；属性声明
⼩结：瞧！是不是？three是four的直接⽗元素，在one和two都已经设置position: relative；属性声明的前提下，three还是把four给捕获了。
但是！前⾯⼏部都是常规套路，如果“不⾛寻常路”(⼴告位招租)呢？
第五步，在第四步的基础上，将four的css规则中right的属性值改为负值呢？会有什么效果？
此时，four已经“⼀只脚跨出”了three的“势⼒范围”。
css代码如下
#four {
background-color: olive;
outline: 2px dashed;
width: 50%;
height: 75%;
position: absolute;
right: -25%;
top: 5%;
}
⼩结：⼀个元素A要设置绝对定位，离它最近的、设置了相对定位的祖先类元素B，就会“捕获”它。但是最终，作为后代元素的A也只是以B为参照物，也就是从B的位置“出发”，⾄于能去到哪⾥，则是由top/right/bottom/left属性来决定了。
看完以后学到了啥
哦，似乎只是知道了⼀个元素要设置绝对定位必须⾸先确定离它最近的、设置了相对定位的祖先元素作为参照物，然后就可以“背上⾏囊来⼀次说⾛就⾛的旅⾏了”(扇脸)，应该是可以进⾏相对于参照物的位移了。
唠叨
⾄于为何要⽤前后的两个p元素和five，他们也都是作为我们实验的对照组啊。这⾥只⽤了对W3C标准⽀持得好的chrome内核的，360极速进⾏测试，其他浏览器下是什么测试情况有待考察。
此⽂本是，个⼈学习实践结果，作为学习笔记加深印象。其他初学者也许亦有些微帮助。
⾄此。
软件与环境
Windows 7 ultimate 64bit；
sublime text 3 + liveStyle；
360 chrome(内核版本45.0.2454.101)，应该不是不很旧吧。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。