纯CSS做无数据库接入APP项目所需知识梳理（四）

我们在生活中使用过各种形形色色的APP，其实它的页面布局并没有想象中的难，这里开一个页面的系列，总结前端的基本知识体系，最后利用总结的体系做一个纯CSS的QQ音乐仿制APP。

本篇内容 position

1.fixed-基于屏幕

适合做顶栏的悬浮导航,会破环原来元素陈列方式,其他元素会钻到他的下方.
position: fixed;
top（bottom）: 0px;

    <style>

        * {
            margin: 0px;
            padding: 0px;
        }

        #header {
            width: 100%;
            height: 60px;
            background-color: #212121;

            position: fixed;
            top: 0px;

            opacity: .5;     //  透明度
        }

    </style>

2.relative-相对定位：
相对定位是相对于自己定位，他不会破坏它原有的应该出现的序列，只会相对于自己原来的位置定位。
重叠时的优先级语句：z-index ：n；（-9999

 <style>

        * {
            margin: 0px;
            padding: 0px;
        }

        .d {
            height: 100px;
            width: 100px;

        }

        #d1 {
            background-color: #9c27b0;
            position: relative;
            left: 50px;
            top: 50px;

            z-index: 1;
        }
        #d2 {
            background-color: cornflowerblue;
            position: relative;
            left: -25px;
            top: -10px;
            z-index: 3;
        }

        #d3 {
            background-color: lightseagreen;
            position: relative;
            left: 50px;
            top: -70px;
            z-index: 2;
        }
 </style>

3.absulote-绝对定位
绝对定位也是脱离文档流的定位，是基于父层的定位，会一层层往上找，一直找不到定位属性会变成基于屏幕定位，它的使用必须配合着相对定位或其他定位属性，如果想让绝对定位的子层跟着父层走，那么离他最近的父层必须有定位属性。

    <style>

        * {
            margin: 0px;
            padding: 0px;
        }

        .d {
            height: 100px;
            width: 100px;

        }

        #d1 {
            background-color: lightseagreen;

            position: relative;

            left: 50px;

        }

        .msg {
            height: 30px;
            width: 30px;
            background-color: crimson;

            position: absolute;
            right: -15px;
            top: -15px;
            border-radius: 50%;    //圆角
        }

 </style>