什么是前辈元素?为什么前辈元素必须是relative,相对参照的是absolute?
什么是前辈元素?为什么前辈元素必须是relative,相对参照的是absolute?
完全不明白啊,难道不是参照的绝对定位(不动的),而相对参照的才是相对定位吗(按照参照定位元素来定位)?
什么是前辈元素?为什么前辈元素必须是relative,相对参照的是absolute?
完全不明白啊,难道不是参照的绝对定位(不动的),而相对参照的才是相对定位吗(按照参照定位元素来定位)?
2016-08-03
什么是绝对定位:
如果想为元素设置层模型中的绝对定位,需要设置position:absolute(表示绝对定位),这条语句的作用将元素从文档流中拖出来,然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口
首先你得理解绝对定位到底是怎么回事。
分析一下老师给的定义:
将元素从文档流中拖出来:
意味着这个元素它不会占用原来的位置(和相对定位做对比)
相对于其最接近的一个具有定位属性的父包含块进行绝对定位:
最接近:就是离得最近的
具有定位属性:意味着在css中需要设置position是什么(absolute/relative/fixed)
父包含块:意味着参考块包含着定位块。
如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口
这样的块是什么块?
这样的快必须同时满足两个条件:
具有定位属性
是父包含块
如果找不到,那就相对于body元素定位。
<div id="box1">
<div id="box2">
<div id="box3"> </div>
</div>
</div>
例如上面这段代码,假设box3为定位块,box1是参考块,那么box1就应该包含box3.同理,如果你想把box2作为参考块,那么box2也得包含着box3.
(这时,box2,box1都满足条件“是box3的父包含块”,但是还不满足条件“具有定位属性”,如果想把box2或者box2,box1作为参考块,还要给他们添加定位属性,如下)
<style type="text/css">
#box1{positon:abosute}
</style>
(这时,box1既满足条件“父包含块”,也满足条件“具有定位属性”,那么box1就可以作为参考块了;而box2,依旧不满足“具有定位属性”,尽管box2离box3是最近的,但是依然不能作为参考块。)
综上:只要参考块是定位块的父包含块,并且具有定位属性,那就可以作为参考块。至于是否一定要设置为position:relative,是不一定的。
定位块,你要做相对参考块的定位,那么可以用absolute或者relative,未必一定是absolute,不能用fixed,因为fixed是相对于浏览器窗口的,才不管你参考块是什么。
举报