position定位类型

position有5种值:absolute;relative;fixed;static;inherit。默认static。

注:relative是相对自身,absolute是相对父元素

absolute:
1.设置了absolute的元素宽度是由内容决定的,relative元素的宽度的则是取决于父元素的宽度
2.如果设置了absolute属性,元素会让出原来的位置,处于另外一个层级。(完全脱离文档流)
3.在没有设置left,top等值的时候,虽然div已经有了absolute元素的特性,但是还会保持在之前的位置,尽管已经处在不同的层级。这时候如果我们设置left和top都为0,就会基于最近的定位了的父元素进行偏移。(在这个例子中,div3就会偏移到左上角的位置)

<style>
        div {
            height:100px;
            border:1px solid #999;
        }
        #div1{
            background-color:yellow;
        }
        #div2{
            background-color:orange;
        }
        #div3 {
            background-color:skyblue;
            position: absolute;
            top: 20px;
        }
        #div4 {
            background-color:lightgray;
        }
        
    </style>
    <body>
            <div id="div1">第一个div</div>
            <div id="div2">第二个div</div>
            <div id="div3">第三个div</div>
            <div id="div4">第四个div</div>
    </body>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容