首页 > 微信浏览器打开页面后,安卓的手机有个bananer,bananer上的文字会随着屏幕滑动而滑动,要怎么整?

微信浏览器打开页面后,安卓的手机有个bananer,bananer上的文字会随着屏幕滑动而滑动,要怎么整?

问题:
1、在安卓手机上,红色框的内容会随着滑动屏幕而滑动。
在浏览上测试没有问题也是固定的,但是只要在微信中打开,“关于尿酸的七大误解 与右边的箭头会随着着手的滑动而滑动”
2、在IOS手机上,整个内容都偏向左上角,刷新没反应,感觉就是完全不适配

我要的效果是像这样固定死的,怎么实现?
下面是我的代码:

<!--bananer-->
        <div id="coverDiv" class="mui-slider">
            <div class="mui-slider-item">
                <img id='coverTitleImg' src="" alt="fengmian" class="img">
                <div class="coverTitleBGDiv">
                    <!--一开始是coverTitleDiv的内容放在这里的-->
                </div>
                <div class="coverTitleDiv">
                    <div id='coverTitle' class="covertTitleLable"></div>
                    <img src="../img/share/right_arrow.png" class="covertTitleImg" alt="">
                </div>
            </div>
        </div>
.covertTitleLable{
    position: fixed;
    top: 156px;
    z-index: 10;
    color:#FFF;
    -webkit-align-self:center;
    -ms-flex-item-align:center;
    align-self:center;
    margin-right:10px;
    font-size: 16px;
}
.covertTitleImg{
    position: fixed;
    z-index: 10;
    right: 5px;
    height:20px;
    width:20px;
    top: 156px;
    right:8%;
}

@media only screen and (min-width: 320px) {
    .contentTitle {
        width: 180px;
    }
}

@media only screen and (min-width: 360px) {
    .contentTitle {
        width: 220px;
    }
}

@media only screen and (min-width: 375px) {
    .contentTitle {
        width: 230px;
    }
}

@media only screen and (min-width: 414px) {
    .contentTitle {
        width: 270px;
    }
}

如果你是希望banner固定在封面上的话,应该用position: absolute;同时父容器 position: relative。

你现在用的position:fixed, 生成绝对定位的元素,它是相对于浏览器窗口进行定位。

【热门文章】
【热门文章】