项目场景:
最近在做h5下载页,底部有一个下载按钮,平时遇到这种需求首先想到的就是position: fixed;,但是发现在ios手机上用百度浏览器打开以后,按钮会出现不显示想象,感觉很奇怪。微信浏览器打开微问题,只有百度浏览器会出现。
问题描述
刚开始以为是层级问题,但是把按钮层级加高也没起作用,然后就开始手机连本地调试,发现是fixed的原因,会在元素行内添加display: none的样式,然后试着通过操作dom给手动添加display: block,但是也没起作用。
原因分析:
发现是fixed的原因,,使用fixed时,百度浏览器(移动端)会在元素行内添加display: none的样式
解决方案:
提示:position: sticky
使用position: sticky,完美解决,但是这个属性有兼容问题,使用之前还是做好取舍。
position: sticky;
bottom: 0;