复制代码 代码如下:
- 第一块
- 第二块
- 第三块
- 第四块
- 第五块
如果我我们设定LI为position:relative;设置span为position:absolute;那么我们会发现无论SPAN的z-index值设置得再高都将永远在后面父级的下面。
复制代码 代码如下:
*{margin:0;padding:0;list-style:none;}
li{width:100px;height:100px;margin:05px00;background:#000;float:left;position:relative;z-index:1;}
lispan{width:200px;height:100px;background:#c00;position:absolute;top:0;left:100px;z-index:1000;}
试一下很容易发现我们的子级，z-index的值达到了1000的被设定了position:absolut;子级都被档在了父级的下面。我想了很久，我觉得其根本问题是：设置同样的position:relative/absolute;同级标签之间的等级是无法用z-index超越的。我们上面的例子中的第一个LI的等级永远都要小于后一个LI的等级，所以我们在LI里的子级身上设置了position:absolute;，给了非常高的z-index值。
也许你会这样来想：只要针对有span的LI设置position:relative;不就好了吗？非常正确。当其它的LI都不设置position:relative;那么我们需要的那个子级就可以浮在所有的内容之上。但是如果实际上，所有的LI中都要有span，并且属性都需要一样怎么办？当然我们不大会需要有这样的效果。但是我们需要有这样的效果：子级全部是隐藏的，当有鼠标反应时出现并且浮在所有的内容之上。我们要知道，这确实是件让人头疼的事，因为我们上面见识到了，子级在显示的时候都被压在了下一个父级标签的下面。下面我们来实现一下这个鼠标反应的定位效果：
复制代码 代码如下:
我们通过链接的鼠标事件来完成这个显示隐藏效果：
复制代码 代码如下:
*{margin:0;padding:0;list-style:none;}
li{height:100px;margin:05px00;float:left;width:100px;}
lia{position:relative;z-index:1;display:block;height:100px;width:100px;background:#000;}
lia:hover{background:#000000;}
lispan{display:none;}
lia:hoverspan{display:block;background:#c00;width:200px;height:200px;position:absolute;top:0;left:100px;z-index:1000;}
当前1/3页123下一页阅读全文
