针对前端在百度浏览器总的固定定位的问题

再做一个广告宣传页的时候，碰到这样一个问题：

如上边这样一张图片，底部有一个按钮这个按钮固定在底部（fixed定位）；
看似很简单的一个效果实现，然而在百度浏览器却出现了问题:
按钮在百度浏览器中会隐藏不见；

经过大量排查之后确定，发现只有百度浏览器中会隐藏不见；
原来这是百度浏览器的广告屏蔽机制，会让这种固定定位在底部的元素当作广告来屏蔽掉（隐藏移除不显示）

解决方案：底部不要100%宽度，且不要为一张图片
还可以通过（高度未超屏）position：absolute 来实现相同效果或采用js来实现布局效果

针对前端在百度浏览器总的固定定位的问题相关推荐

巧用伪元素解决fixed元素被百度浏览器屏蔽问题
背景在做这样一个活动页时,发现底部fixed定位的 button 元素在百度浏览器中展示不出来. Google后发现了这位小伙伴的文章针对前端在百度浏览器总的固定定位的问题文中提到: 这是百度浏 ...
CSS固定定位与粘性定位4大企业级案例
前面两篇文章为大家详细讲解了相对定位与绝对定位的应用场景和案例.如果想了解的可以在公众号里面查看去看.本小节我们学习下固定定位与粘性定位的应用场景和案例. 属性值描述 relative 相对定位相 ...
绝对定位和固定定位的区别
相同点:都脱离了标准文档流不同点: (1)定位参考的对象不同绝对定位(absolute)参考的是离自己最近的已经定位的祖先元素,若祖先元素没有被定位,那么则参考浏览器窗口固定定位(fixed)参 ...
相对定位relative、绝对定位absolute、固定定位fixed
注:默认情况下的定位是 postion:static: 使用定位时,常常使用偏移量对位置进行描述:left.right.top.bottom 定位时,使用z-indent可以元素的堆叠顺序,例:z-i ...
css加了固定定位就不显示内容_前端开发必备，学好”定位“向菜鸟说拜拜
众所周知,前端CSS中,盒模型.浮动.定位为必须掌握的三座大山. 今天就来聊聊定位的那些事. 定位是什么? 先来看看哪些场景用到定位,如下图所示,凡是有盒子压住另一个盒子的地方都可定位,因为用浮动做不 ...
Web前端，CSS常用之相对定位和绝对定位的区别，静态定位、子绝父相、固定定位、元素的层级关系的了解
前言持续学习总结输出中,今天分享的是Web前端,CSS常用之相对定位和绝对定位的区别,静态定位.子绝父相.固定定位.元素的层级关系的了解 1.定位的基本介绍我们的网页常见布局方式有:标准流.浮动. ...
【前端】CSS中的相对定位，绝对定位和固定定位
相对定位和绝对定位,不改变元素的大小形状,只改变元素的位置. 相对定位和绝对定位是通过position属性来控制的,position属性的值为下面几种: position默认值为stat ...
百度浏览器屏蔽H5固定在底部按钮之解决方案
最近在做一个活动页的时候遇到一个奇怪的问题,活动页底部固定一个按钮,但是在百度浏览器打开时按钮一闪不见,而只有百度浏览器会这样. 查询资料发现,这是百度浏览器的广告屏蔽机制,会让这种固定定位在底部的元 ...
CSS固定定位[相对浏览器] 相对定位[相对自己] 绝对定位[有relative的元素]
1基础 Fixed:固定定位是相对于浏览器窗口来定位的 Absolution: 绝对定位:当没有父元素或者父元素没有进行定位的时候,就是固定定位,以浏览器为标的物元素会脱离文档流,若该元素没有设置 ...

针对前端在百度浏览器总的固定定位的问题

针对前端在百度浏览器总的固定定位的问题相关推荐

最新文章

热门文章