一佳一

记录像1+1一样简洁的代码
随笔 - 396, 文章 - 0, 评论 - 95, 阅读 - 107万

导航

< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

div绝对定位针对手机浏览器的区别

Posted on   一佳一  阅读(2576)  评论(0编辑  收藏  举报

最近在对ipad和安卓平板做测试,发现我自己写的一个下拉控件在安卓浏览器里面被遮盖了,但是PC或者ipad都没有这个现象,一开始以为是z-index 可是无论我调多少都没有用,研究了好久,发现是代码的位置问题

首先我们看下效果图

在电脑上我用的是IE

在安卓浏览器我用的是QQ浏览器(HD)

可以发现,安卓上面被遮挡了

原因就是我把mydiv1放在外层inputdiv_1的里面

代码:

复制代码
<div id="inputdiv_1">
                                    <input id="price_1" name="price_1" value="" autocomplete="off" onfocus="GetBuyPrice(this)" onblur="InputValue(this);SumMoeny();">
                                    <div id="mydiv1" style="position: absolute; left: 725.5px; top: 113px;">
                                        <div style="width: 197px" class="downlist">
                                            <div>单价:19.28元 时间:2014-04-09</div>
                                            <div>单价:19.28元 时间:2014-03-12</div>
                                        </div>
                                    </div>
                                </div>
复制代码

这样父元素就会把子元素遮盖了

如果把mydiv1提到外层和父元素同级,则就不会被遮盖了

正确代码如下:放在</div>后面

 </div>
            <div id="mydiv1" style="position: absolute; left: 725.5px; top: 113px;">
                <div style="width: 197px" class="downlist">
                    <div>单价:19.28元 时间:2014-04-09</div>
                    <div>单价:19.28元 时间:2014-03-12</div>
                </div>
            </div>


这样无论是安卓浏览器还是IE都显示在最顶层了

编辑推荐:
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
阅读排行:
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 【杭电多校比赛记录】2025“钉耙编程”中国大学生算法设计春季联赛(1)
点击右上角即可分享
微信分享提示