relative absolute无法冲破的等级问题解决第1/3页
2008-06-19 00:00
567 查看
前段时间记得好像是谁在群里提出了一个实在是让大家都觉得很不理解的一个问题:
如果我我们设定LI为position:relative;设置span为position:absolute;那么我们会发现无论SPAN的z-index值设置得再高都将永远在后面父级的下面。
试一下很容易发现我们的子级,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,并且属性都需要一样怎么办?当然我们不大会需要有这样的效果。但是我们需要有这样的效果:子级全部是隐藏的,当有鼠标反应时出现并且浮在所有的内容之上。我们要知道,这确实是件让人头疼的事,因为我们上面见识到了,子级在显示的时候都被压在了下一个父级标签的下面。下面我们来实现一下这个鼠标反应的定位效果:
我们通过链接的鼠标事件来完成这个显示隐藏效果:
<ul> <li>第一块</li> <li><span>第二块</span></li> <li>第三块</li> <li>第四块</li> <li>第五块</li> </ul>
如果我我们设定LI为position:relative;设置span为position:absolute;那么我们会发现无论SPAN的z-index值设置得再高都将永远在后面父级的下面。
*{margin:0; padding:0; list-style:none;} li {width:100px; height:100px; margin:0 5px 0 0; background:#000; float:left; position:relative; z-index:1;} li span {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,并且属性都需要一样怎么办?当然我们不大会需要有这样的效果。但是我们需要有这样的效果:子级全部是隐藏的,当有鼠标反应时出现并且浮在所有的内容之上。我们要知道,这确实是件让人头疼的事,因为我们上面见识到了,子级在显示的时候都被压在了下一个父级标签的下面。下面我们来实现一下这个鼠标反应的定位效果:
<ul> <li><a href="" title=""><span>第一块</span></a></li> <li><a href="" title=""><span>第二块</span></a></li> <li><a href="" title=""><span>第三块</span></a></li> <li><a href="" title=""><span>第四块</span></a></li> <li><a href="" title=""><span>第五块</span></a></li> </ul>
我们通过链接的鼠标事件来完成这个显示隐藏效果:
*{margin:0; padding:0; list-style:none;} li {height:100px; margin:0 5px 0 0; float:left; width:100px;} li a {position:relative; z-index:1; display:block; height:100px; width:100px; background:#000;} li a:hover {background:#000000;} li span {display:none;} li a:hover span {display:block; background:#c00; width:200px; height:200px; position:absolute; top:0; left:100px; z-index:1000;}
相关文章推荐
- relative absolute无法冲破的等级问题解决第1/3页
- position:relative/absolute无法冲破的等级
- position:relative/absolute无法冲破的等级(转)
- position:relative/absolute无法冲破的等级
- position:relative/absolute无法冲破的等级
- position:relative/absolute无法冲破的等级
- position:relative/absolute无法冲破的等级
- SQL Server不存在或访问被拒绝问题的解决第1/3页
- 关于相对定位与绝对定位无法冲破的等级的解决方法
- 解决绝对定位层(position:absolute;)上无法触发滚动事件的问题
- 解决Mac安装M2Crypto提示无法找到openssl头文件问题
- 解决angular2 获取到的数据无法实时更新的问题
- 解决无法自动挂载U盘问题
- 解决vs2010无法找到System.Data.OracleClient的引用问题
- 解决Eclipse发布webproject, jar无法发布到tomcat lib目录下的问题
- SSH中对AJAX的处理无法解决跳转的问题(其实是STRUTS2对AJAX的特殊拦截)
- eclipse更新之后,出现adb问题无法解决
- eclipse无法加载插件问题的解决
- 解决android 1920x1080模拟器无法启动问题