需求:导航栏固定在头部,并且可以左右滑动
<div class="wrap"></div>
//css样式
.wrap {
position: fixed;
display: flex;
}
发现flex布局失效了,因此被定位的盒子不参与flex布局。
那就在这个盒子外面套一个盒子,给外层盒子使用定位,内层没有使用定位的盒子继续使用flex
<div class="content">
<div class="wrap"></div>
</div>
// css样式
.content {
position: fixed;
}
.wrap {
display: flex;
}
问题基本上解决了,但是有一些低版本手机上滑动失效了并且样式也出现了问题,也就是不兼容父元素定位子元素使用flex布局,最后只能是把flex布局替换掉了
<div class="content">
<div class="wrap"></div>
</div>
// css样式
.content {
position: fixed;
}
.wrap {
display: inline-block;
}