杂七杂八的css

1. position:fixed

以视口为坐标系进行绝对定位，不会随着页面滑动而发生位移。

2. margin-right:-20px

width增加20px。

3. z-index:-1

置于父元素底层。

---

现在有个需求，上层div不随页面滑动而滑动，图层发生重叠时候，遮盖住低级图层，只显示最高层的颜色。

css:

    body{
        height: 200vh;
    }
    #wrap {
        height: 50vh;
        width: 100vw;
        display: flex;
        flex-direction: column;
    }

    #header {
        display: flex;
        position: fixed;        /* 固定div在视口上方 */
        height: 100px;
        width: 100%;
        top: 0;
        justify-content: space-between;
    }
    #header:after{
        content: '';
        height: 100px;
        position: absolute;
        z-index: -1;           /* 值为负数 置于header下面 */
        background-color: white;
        width: 100%;
    }

    .tag {
        display: flex;
        justify-content: center;
        align-items: center;
        width: calc(25% - 15px);  /* 每个div之间距离为20px */
    }
    #middle:before{
        content: '';
        height: 100px;
        display: block;
    }
    #footer {
        display: flex;
        flex-grow: 9;
        justify-content: center;
        align-items: center;
        background-color: pink;
    }

html:

    <div id="wrap">
        <div id="header">
            <div class="tag" style="background-color: lightcoral;">html</div>
            <div class="tag" style="background-color: lightblue;">css</div>
            <div class="tag" style="background-color: #d4c835;">js</div>
            <div class="tag" style="background-color: lightgoldenrodyellow;">xml</div>
        </div>
        <div id="middle" v-html='rawHtml'></div>
        <div id="footer">{{curId}}</div>
    </div>