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>

 

上一篇:【CSS】让textarea在div里水平垂直都居中的三种办法


下一篇:vue.js v-show