自己自学前端不久，遇到很多问题。特别是css中的position，着实让我头疼。自己看了一些视频，一些书籍，也慢慢对position有了一定了解。 很多关于css的文章，都讲到当子元素是position时候，绝对定位以窗口可视区为参照，可是当我敲代码的时候，出现了问题。现在总结如下： 第一种情况（子元素以可视窗口为参照点） 1：static(最近祖先元素)——>static(父元素) ——>absolute(子元素)
这里写代码片 <html> <style type="text/css"> html{祖先元素 border: 1px solid blue; margin: 20px 0 0 30px; position: static; } body{父元素 border: 1px solid red; height: 100px; position: static; } #aas{子元素 height: 20px; width: 30px; background: brown; left: 0px; bottom: 0px; position: static; } </style> </head> <body> <div id="aas"> </div> </body> </html>第二种情况（子元素以最近祖先元素为参照点） 2：relative或absolute(最近祖先元素)——>static(父元素) ——>absolute(子元素)
这里写代码片 <html> <style type="text/css"> html{祖先元素 border: 1px solid blue; margin: 20px 0 0 30px; position: relative或absolute; } body{父元素 border: 1px solid red; height: 400px; position: static; } #aas{子元素 height: 100px; width: 100px; background: brown; left: 0px; bottom: 0px; position: absolute; } </style> </head> <body> <div id="aas"> </div> </body>第三种情况（子元素以最近父元素为参照点） 2：**非**static或absolute或relative(最近祖先元素)——>非static(父元素) ——>absolute(子元素)
这里写代码片 <html> <style type="text/css"> html{祖先元素 border: 1px solid blue; margin: 20px 0 0 30px; position: relative或relative或static; } body{父元素 border: 1px solid red; height: 400px; position: relative或absolute; } #aas{子元素 height: 100px; width: 100px; background: brown; left: 0px; bottom: 0px; position: absolute; } </style> </head> <body> <div id="aas"> </div> </body>
备注：把代码复制过去，方便查阅效果。
