移动端遇到的问题

1. 1. 问题：

      z-index属性失效的问题

      其实原理也很简单，就是利用了z-index的覆盖问题，在写的过程中我发现无论怎么改变，insert的z-index总是无效的，于是百度了一下z-index无效的情况，一共有三种：

      1、父标签 position属性为relative；
      
      2、问题标签无position属性（不包括static）；
      
      3、问题标签含有浮动(float)属性。

      这样也很好理解为什么parent设置了position和z-index之后insert的z-index就会失效的问题了，他的解决办法有是三个：

      
      1、position:relative改为position:absolute；
      
      2、浮动元素添加position属性（如relative，absolute等）；
      
      3、去除浮动。

      所以，去掉parent的position和z-index，达到了我想要的效果，如下图所示：

      问题1:input框在手机上ios会出现有阴影的效果，如果去掉可使用上面样式，安卓也有

   
   input:-webkit-autofill,select:-webkit-autofill {
     -webkit-box-shadow: 0 0 0px 1000px white  inset !important;
   }
   
   
   input {
     outline-color: invert;
     outline-style: none;
     outline- 0px;
     border: none;
     border-style: none;
     text-shadow: none;
     -webkit-appearance: none;
     -webkit-user-select: text;
     outline-color: transparent;
     box-shadow: none;
   }
   
   问题1:input框在手机上ios会出现有阴影的效果，如果去掉可使用上面样式，安卓也有
   问题2:input框border-radus这个样式，如果设置了值只设置两个角的值，但在ios手机它会四个角都是圆的，所以要再设置不想让其是圆角的值为0px即可
   
   
   
   
   
   二、读fastclick源码可以学到的东西

   1. //不支持用于模拟的touchstart事件，无法模拟
      if (typeof window.ontouchstart === 'undefined') {

      return true;

      }

      // 探测chome浏览器
      chromeVersion = +(/Chrome/([0-9]+)/.exec(navigator.userAgent) || [, 0])[1];

      if (chromeVersion) {

      //安卓设备
      if (deviceIsAndroid) {

      metaViewport = document.querySelector('meta[name=viewport]');

      if (metaViewport) {

      // 安卓下，带有 user-scalable="no" 的 meta 标签的 chrome 是会自动禁用 300ms 延迟的，无需 FastClick
      if (metaViewport.content.indexOf('user-scalable=no') !== -1) {

      return true;

      }

      //chome32以上带有 width=device-width的meta标签的也唔需要使用FastClick
      if (chromeVersion > 31 && document.documentElement.scrollWidth <= window.outerWidth) {

      return true;

      }

      }

      // 桌面设备自然无需使用
      } else {

      return true;

      }

      }