今天我决定来讲讲一些具体的问题。上班到了第二个月，感觉工作压力和强度也不算很大，但是遇到了很多“名为经验”的小知识和小习惯。
今天讲的故事是这样的，我现在有一个页面，想做一个渐渐浮现起来的全局菜单，
- 菜单浮现前的css属性为
z-index: -1;
overflow:scroll; //因为菜单可能内容会多，这样可以滚屏下去找
opacity: 0;
- 点击菜单按钮后，更新的css属性为
z-index: 999;//一个很高的值，覆盖所有
opacity: 1; //可以添加个transition，有种渐渐浮现的效果。
- html结构大致是这样
<div class="menu"></div>
<div class="main"></div>
问题来了，突然发现，在android上一切正常，而在iOS上出现了页面无法滚动的问题，或者觉得滚得很不顺。（我没有iPhone。。。别人发现的）
我探索了好久才发现可能跟菜单有关系，因为我先滑动一下屏幕，页面没有动静，但是点开菜单，里面的内容却是已经滑动过的了。
后来将点击按钮前的菜单的overflow属性先设置成hidden，等到浮现后才打开scroll，果然没有了这个问题。
出现这个问题是因为我想当然以为scroll这个动作会在鼠标区域中的z-index最高的部分先进行，结果iOS中可能是从文档顺序较前或者较高的位置进行触发的，所以先触发了z-index较低位置的事件。
所以除了z-index和滚动需要警惕之外，还有一点是，最好就是尽就避免用z-index做这个效果，不出现的内容就把高度宽度降到0，这样就算是overflow:scroll的一个元素，鼠标或者接触点发生scroll的位置根本不会影响到这个元素。
上述的问题真实存在，原因纯属猜测，没有经过仔细求证，敬请指正。