当子元素的position是：absolute时候的深度分析

2019-11-09 18:58:29

字体：大中小

来源：转载

供稿：网友

自己自学前端不久，遇到很多问题。特别是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>

这里写图片描述