CSS中TRBL和position关系

<style>
#div1 {height:200px;width:100px;background:#666;position:absolute;right:0px;top:100px}
#div2 {height:50px;width:25px;background:#6F6;position:relative;left:-25px;top:0}
/*1.没有父级的absolute;父级为absolute的relative*/
/*#div1 {height:200px;100px;background:#666;right:0px;top:100px}
#div2 {height:50px;25px;background:#6F6;position:absolute;left:25px;top:0}*/
/*2.有父级但父级无position的absolute;无position的TRBL*/
/*#div1 {height:200px;100px;background:#666;position:relative;right:0px;top:100px}
#div2 {height:50px;25px;background:#6F6;position:absolute;left:-25px;top:0}*/
/*3.有父级父级为relative的absolute;无父级的relative*/
/*#div1 {height:200px;100px;background:#666;right:0px;top:100px}
#div2 {height:50px;25px;background:#6F6;position:relative;left:-25px;top:0}*/
/*4.有父级但父级无position的relative*/
<body>
<div id = "div1">
    <div id = "div2">分享至</div>
</div>
</body>

1.

没有父级的absolute:
以浏览器为基准
父级为absolute的relative:
以父级为基准

2.

有父级但父级无position的absolute;
以浏览器为基准
无position的TRBL
不起任何作用

3.

有父级父级为relative的absolute
以父级为准
无父级的relative
以body为父级

4.

 

有父级但父级无position的relative
以父级为准
原文地址:https://www.cnblogs.com/kingofcorn/p/5552128.html