html百度转到顶部 fixed,科技常识：完美解决安卓端百度浏览器屏蔽fixed悬浮元素的问题...

今天小编跟大家讲解下有关完美解决安卓端百度浏览器屏蔽fixed悬浮元素的问题 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关完美解决安卓端百度浏览器屏蔽fixed悬浮元素的问题 的相关资料，希望小伙伴们看了有所帮助。

问题描述

h5活动页面底部有个悬浮图片按钮 使用fixed悬浮定位在底部 但是在安卓端的百度浏览器下打开 却发现该图片一闪而过 在百度浏览器中消失不见。

原因

这是由于百度浏览器的广告屏蔽机制 会让这种固定定位在底部的元素当作广告来屏蔽掉(隐藏移除不显示)。

代码实现

主要用的一个空标签,就按钮图片作为背景 放在伪元素中并添加到到页面上 这样就完美解决了百度浏览器屏蔽fixed悬浮元素的问题。

html：

css：

.foot{

display: block;

position: fixed;

max-width: 640px;

width: 100%;

bottom: 0;

}

.foot::after {

content: '';

position: absolute;

bottom: 0;

left: 0;

width: 100%;

height: 100%;

min-height: 1.05rem;

background-size: cover;

background-image: url('./images/chat/foot.png')

}

当然也可以使用js来实现布局问题 当页面完全渲染完成后 在给元素添加fixed的属性(之前让该元素隐藏)。

来源：爱蒂网

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时候联系我们修改或删除，多谢。