<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
以父级为准