绝对定位

2022-05-12 11:33:47 阅读：114 来源： 互联网

<!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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

绝对定位