zoukankan      html  css  js  c++  java
  • div绝对定位针对手机浏览器的区别

    最近在对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=" 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=" 197px" class="downlist">
                        <div>单价:19.28元 时间:2014-04-09</div>
                        <div>单价:19.28元 时间:2014-03-12</div>
                    </div>
                </div>


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

  • 相关阅读:
    python练习--1、简易登录接口
    python--1、入门
    mysql数据库安装
    第八章总结
    第七章总结
    第三周总结
    第二周总结
    if、switch语句
    2章总结
    1月14日总结
  • 原文地址:https://www.cnblogs.com/linyijia/p/3642771.html
Copyright © 2011-2022 走看看