绝对定位

2022-05-12 11:33:47 作者：互联网
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>绝对定位</title>
        <style>
        
            .box1{
                width: 200px;
                height: 200px;
                background-color: #bfa;
                position: relative;
            }
            
            .box2{
                width: 200px;
                height: 200px;
                background-color: #ff0;
                /* 
                    绝对定位
                        将position设置为 absolute则开启元素的绝对定位
                        绝对定位的特点
                            1.绝对定位会使元素完全脱离文档流
                            2.绝对定位会改变元素的性质，行内变块，块宽高被内容撑开
                            3.开启绝对定位后如果不设置偏移量，元素的位置不会发生变化
                            4.绝对定位会相对与离他最近的开启了定位的祖先元素进行定位，如果所有的祖先元素都没有开启定位，
                                则相当于HTML标签进行定位，所以一般情况，我们为一个元素开启了绝对定位，会同时为他的父
                                元素开启相对定位
                    
                            绝对定位元素会相对与他的包含块进行定位
                            包含块
                                对于绝对定位来说，包含块就是离他最近的开启了定位块的元素
                                如果没有开启定位的祖先元素，则其包含块是网页中的初始包含块
                                html就是初始包含块
                            5.绝对定位会使元素提升一个层级
                                
                            绝对定位元素水平方向布局的等式
                                left + margin-left + border-left + padding-left + width + padding-right
                                + border-right + margin-right + right =包含块的宽度
                                此时就有了5个值可以设置为auto
                                    left
                                    right
                                    magin-left
                                    magin-right
                                    width
                 */
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                margin: auto;
            }
            
            .box3{
                width: 300px;
                height: 300px;
                background-color: #00f;
            }
            
            span{
                width: 100px;
                height: 100px;
                background-color: red;
                position: absolute;
            }
        </style>
    </head>
    <body>
        <!-- <span>我是span</span> -->
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </body>
</html>
标签：定位,right,元素,绝对,width,left
来源： https://www.cnblogs.com/YcxyH/p/16261696.html