a、如果元素的position属性值是绝对的，那么这个时候分为两种情况:
1.如果在父元素(包括直接父元素和间接父元素)中没有定义position属性(即默认属性static)，那么该元素将引用页面并基于页面定位，top、left和其他属性将引用页面。
如果元素的宽度和高度属性是百分比，那么这两个属性也是参考页面的宽度和高度。
* {边距:0；填充:0；}#div1 {宽度:200px高度:200px背景:# ccc}#div2 {宽度:50%；身高:50%；背景:# aaatop:100px；左:100px位置:绝对；}
在上面的代码中，div2是绝对定位的，其父元素没有设置position属性，那么该元素将参照页面进行定位。
从图中可以看出，div2是相对于页面定位的，其宽度和高度是页面宽度和高度的一半。
从控制台可以看到，页面的宽度和高度正好是div2元素的两倍。
2.如果父元素定义了位置属性(相对或绝对)，则父元素将被引用。
* {边距:0；填充:0；}#div1 {宽度:200px高度:200px背景:# ccc位置:相对；top:100px；左:100px}#div2 {宽度:50%；身高:50%；背景:# aaatop:100px；左:100px位置:绝对；} div1 div2
从图中可以看出，div2是相对于div1定位的，宽度和高度也是相对于div1的。
第二，如果一个元素的position属性值是相对的，那么这个元素是相对于它的正常位置定位的(也就是position:static)。
默认情况下，宽度将填充父容器，高度将根据其内容确定。当它是父元素的第一个子元素时，位置将在父元素的左上角。
那么设置它的位置和大小将基于它自己。身高的情况比较特殊。设置高度时，将基于填充父容器的状态。
* {边距:0；填充:0；} # div 1 { width:100px；高度:100px背景:# ccc}#div2 {宽度:50%；身高:50%；背景:# aaatop:100px；左:100px位置:相对；}
adminjs.cn是一个以CSS、JavaScript、Vue、HTML为核心的前端开发技术网站。我们致力于为广大前端开发者提供专业、全面、实用的前端开发知识和技术支持。 在本网站中，您可以学习到最新的前端开发技术，了解前端开发的最新趋势和最佳实践。我们提供丰富的教程和案例，让您可以快速掌握前端开发的核心技术和流程。 Adminjs.cn还提供一系列实用的工具和插件，帮助您更加高效地进行前端开发工作。我们提供的工具和插件都经过精心设计和优化，可以帮助您节省时间和精力，提升开发效率。 在Adminjs.cn中，您可以找到您需要的一切前端开发资源，让您成为一名更加优秀的前端开发者。欢迎您加入我们的大家庭，一起探索前端开发的无限可能！