CSS布局-position

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            /* 默认是static,也就是按照正常的文档流进行布局的(从上到下,从左到右) */
            position: static;
            background:red;
            width:100px;
            height:100px;
        }
        .p2{
            /* relative表示相对定位,相对的是哪个位置呢?相对的是元素本身所在的位置,
            并且,元素占有的还是那个位置,其他元素并不会因为relative的偏移而改变位置 */
            position: relative;
            left:10px;
            top:-10px;
            background:blue;
        }
        .p3{
            /* 绝对定位,一旦设置了绝对定位,那么它就会脱离文档流,它的位置不会影响其他元素的位置 */
            /* 绝对定位也有一个参照物元素,浏览器会往当前元素的父级元素中找,直到找到relative定位或者absolute定位的元素,找不到时以body为参照物元素 */
            position: absolute;
            left:80px;
            top:30px;
            background: green;
        }
        .p4{
            /* 固定定位,它也是脱离文档流的,但是它的参照物永远是屏幕,这个和absolue绝对定位有区别 */
            position: fixed;
            left:0;
            bottom:10px;
        }
        /* 因为有脱离文档流的元素,所以会涉及到覆盖重叠的现象。
        默认的重叠层次是根据代码顺序来的,可以调换一下p2 p3的位置看一下 */
        /* 可以通过设置z-index来改变这种层次关系,在涉及到重叠层次的时候,设置z-index是必不可少的一环。 */
        /* 默认的z-index的auto,也就是根据正常的代码顺序 */
        /* 只有在relative absolute fixed的元素可以设置z-index */
    </style>
</head>
<body>
    <div class="p1">
        position:static
    </div>
    <div class="p2">
        position:relative
    </div>
    <div class="p3">
        position:absolute
        <div class="p3-3" style="position:absolute;width:50px;height:50px;background:yellow;left: 10px;top: 0px;"></div>
    </div>
    <div class="p4">
        position:fixed;
    </div>
    <div class="p5">
        p5
    </div>
</body>
</html>

CSS布局-position

 

CSS布局-position

上一篇:PHP的自带的三个压缩相关的函数:gzcompress、gzencode、gzdeflate


下一篇:git上传忽略node_modules目录