HTML绝对定位的参考点及注意事项有哪些

本篇内容介绍了"HTML绝对定位的参考点及注意事项有哪些"的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

一、绝对定位参考点

1.规律：

（1）默认情况下所有的绝对定位的元素，无论有没有祖先元素，都会以body作为参考点。

（2）如果有一个绝对定位的元素有祖先元素，并且祖先元素也是定位流，那么这个绝对定位的元素就会以定位流的那个祖先元素为参考点。

         .box1{            width: 300px;            height: 300px;            background-color: red;            position:absolute;            left:0px;            bottom:0px;        }        .box2{            width: 200px;            height: 200px;            background-color: yellow;            position: absolute;            left:0px;            top:0px;        }

注意点：i.只要是这个绝对定位元素的祖先元素都可以。ii.指的定位流是指绝对定位/相对定位/固定定位，定位流中只有静态定位是不行的。

（3）如果一个绝对定位的元素有祖先元素，并且祖先元素也是定位流，而且祖先元素中有多个元素都是定位流，那么这个绝对定位的元素会以离它最近的祖先元素作为参考点。

 .......上面的代码不变..........        .box3{            width: 100px;            height: 100px;            background-color: black;            position:absolute;            right:0px;            bottom:0px;        } .........省略代码....... 
    
        
    

二、绝对定位的注意点

（1）如果一个绝对定位的元素是以body作为参考点，那么其实是以网页首屏的宽度和高度作为参考点的，而不是以整个网页的宽度和高度作为参考点的。

（2）一个绝对定位的元素会忽略祖先元素的padding属性。

   .box4{            height: 300px;            width: 300px;            background-color: yellow;            padding:50px;            /*position:absolute;*/            /*boder:20px  black ;*/        }        .box5{            height: 100px;            width: 100px;            background-color: red;            position:absolute;            left:0px;            top:0px;             }    
    

"HTML绝对定位的参考点及注意事项有哪些"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站，小编将为大家输出更多高质量的实用文章！