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>