position: absolute 

position: absolute
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>position: absolute</title>
</head>
<body>
<div id="wrap">
    <div class="box1"></div>
    <div class="box4">
        <div class="box2"></div>
    </div>
    <div class="box3"></div>
    <span class="s1">我是一个span</span>
</div>
</body>
</html>

<style type="text/css">
    /** {*/
    /*    margin: 0;*/
    /*    padding: 0;*/
    /*}*/
    .box1{
        width: 200px;
        height: 200px;
        background: red;
    }
    .box2{
        width: 200px;
        height: 200px;
        background: yellow;
        /*
        1。开启绝对定位会使元素脱离文档流（浮起来，高一层级）
        2. 开启绝对定位后，如果不设置偏移量，则元素的位置不会发生变化
        3. 绝对定位是相对于离开他最近的，开启了定位的祖先元素定位的 （一般情况，开启子元素的绝对定位都会同时开启父元素的相对定位）；如果所有的祖先元素都没有开启定位，就会相对于浏览器窗口进行定位
        4. 绝对定位会使元素提升一个层级
        5. 绝对定位改变元素性质，内联元素变为块元素
        */
        position: absolute;
        left: 0px;
        top: auto;
    }
    .box3{
        width: 300px;
        height: 300px;
        background: yellowgreen;
    }
    .box4{
        width: 300px;
        height: 300px;
        background: orange;
        /*position: relative;*/
    }


    .s1{
        width: 200px;
        height: 200px;
        background: yellow;
        /*5. 绝对定位改变元素性质，内联元素变为块元素(宽高‘起作用’)*/
        position: absolute;
    }
</style>

 

posted @ 2021-02-10 19:53  xiluhua  阅读(132)  评论(0)    收藏  举报