<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;width:100px;background:#666;right:0px;top:100px} #div2 {height:50px;width:25px;background:#6F6;position:absolute;left:25px;top:0}*/ /*2.有父级但父级无position的absolute;无position的TRBL*/ /*#div1 {height:200px;width:100px;background:#666;position:relative;right:0px;top:100px} #div2 {height:50px;width:25px;background:#6F6;position:absolute;left:-25px;top:0}*/ /*3.有父级父级为relative的absolute;无父级的relative*/ /*#div1 {height:200px;width:100px;background:#666;right:0px;top:100px} #div2 {height:50px;width: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
相关资源：CSS position属性和实例应用演示