注:在前端开发中我们经常遇到使用z-index的情况,同时,开发页面的特效实现中,定位,布局展示。都是很重要,在以前的开发中我一直没有注意到z-index的使用其实是受到限制的。
大部分开发环境中或者demo中,模块的布局都是包含float、position等关于定位的问题的。这是为了实现页面的展示效果。例如出现连个模块的堆叠或者两个模块的隐藏替换(这里的举例是关于tab标签页的)
在今天的demo书写中我发现了如下的原理也很简单,就是利用了z-index的覆盖问题,在写demo的过程中我发现无论怎么改变,z-index总是无效的,于是百度了一下z-index无效的情况,一共有三种:
-
父标签 position属性为relative.
-
问题标签无position属性(不包括static).
-
问题标签含有浮动(float)属性。
这样也很好理解为什么parent设置了position和z-index之后insert的z-index就会失效的问题了,他的解决办法有是三个
-
position:relative改为position:absolute.
-
浮动元素添加position属性(如relative,absolute等).
-
去除浮动。
关于清除浮动的做法:.clearfloat:after{ display:block; clear:both; content:""; visibility:hidden; height:0; }
使用伪类 实现操作