position:relative/absolute无法冲破的等级
作者:小毅 来源:蓝色经典 发布时间:2007-05-11 17:03:00
小毅的blog:http://andymao.com/andy/
注:本文实例在IE5.x下可能会显示不出来,请使用IE6、IE7、Firefox、Opera等浏览器来调试!
前段时间记得好像是谁在群里提出了一个实在是让大家都觉得很不理解的一个问题:
<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:200px; 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; }
运行代码框
我们设定了a为position:relative;这样他的子级就会根据父级的左上角为坐标原点进行定位了。然后我们设定span的具体形状以及定位属性,然后把他隐藏了。我们再通过A的伪类:hover使得span被激活。我们看一下结果,我们会发现,所有应该在上面的现在全在下面了。那我们怎么解决这个难题呢,其实以CSS想强行突破是不太可能,所以我们反过来想,能不能让这个没有被触发的父级标签没有position:relative;属性,而只是触发的时候才有级这个父级赋上这样的值?其实想到这里基本上已经可以解决所有的问题了:
*{margin:0; padding:0; list-style:none;}
li {height:100px; margin:0 5px 0 0; float:left; width:100px;}
li a {display:block; height:100px; width:100px; background:#000;}
li a:hover {position:relative; z-index:1; }
li span {display:none;}
li a:hover span {display:block; width:200px; height:200px; background:#c00; position:absolute; top:0; left:100px; z-index:1000; }
运行代码框
我们只要针对a:hover来设定其属性为position:relative;就可以了,这样只有在鼠标触发的时候A才会被赋于一个相对定位的属性。这样就完成可以解决被其它父级标签所挡的尴尬了。
当然如果不介意IE6或是IE5.X这样的浏览器我们还可以把代码再做简化:
<ul>
<li><span>第一块</span></li>
<li><span>第二块</span></li>
<li><span>第三块</span></li>
<li><span>第四块</span></li>
<li><span>第五块</span></li>
</ul>
CSS可以改成这样:
*{margin:0; padding:0; list-style:none;}
li {height:100px; margin:0 5px 0 0; float:left; width:100px; background:#000;}
li:hover {position:relative; z-index:1;}
li span {display:none;}
li:hover span {display:block; width:200px; height:200px; background:#c00; position:absolute; top:0; left:100px; z-index:1000; }
运行代码框
![](https://www.aspxhome.com/images/zang.png)
![](https://www.aspxhome.com/images/jiucuo.png)
猜你喜欢
- 准备必须环境:Python3开始先实现一个简单的版本,直接上代码:import urllib.requestimport urllib.er
- seaborn是python中的一个非常强大的数据可视化库,它集成了matplotlib,下图为seaborn的官网,如果遇到疑惑的地方可以
- 目录一、简单文本类型数据二、复杂型表格提取三、图片型表格提取大家好,从PDF中提取信息是办公场景中经常需要用到的操作,也是经常又读者在后台问
- 一、控制用户存取 1、创建修改用户Creating Users Create/alter user new_user identified
- 实现步骤:图像灰度化边缘检测根据Canny检测得出来的Mat寻找轮廓算出最大轮廓周长or面积根据获取到的最大轮廓下标进行轮廓绘制画出最大矩形
- 今天因为给BeauBeau提供的抽奖号码做SQL文件,一开始收到ZIP文件解开压缩之后被吓到了——29个CSV文件,每个文件保存了1000个
- 先看要实现的饼图效果图方法一:使用seriesseries: [ { &
- 我们已经看到使用WHERE子句的SQL SELECT命令来从MySQL表获取数据。但是,当我们试图给的条件比较字段或列的值为NULL,它不能
- 一个网站空间,但是却可以实现多个域名的访问的一段ASP代码:<%if Request.ServerVariables("SE
- 项目编写过程中,总能遇见对字典进行排序什么的,如果要实现多条件排序只需要下面几行代码实现。充分体现了python的好处了。teamitems
- PHP convert_uuencode() 函数实例编码字符串:<?php $str = "Hello world!&qu
- 不多说,我们直接上源码:# -*- coding:UTF-8 -*-'''实现文件打包、上传与校验Created o
- 本文实例讲述了python实现统计代码行数的方法。分享给大家供大家参考。具体实现方法如下:'''Author: li
- Windows 10 x64macOS Sierra 10.12.4Python 2.7准备好装哔~了么,来吧,做个真正意义上的绿色小软件W
- 具体方法:(推荐教程:mysql数据库学习教程)查看表被锁状态# 查询哪些表锁了show OPEN TABLE
- 目录1 请求和响应1.1 请求1.2 响应2 视图2.1 基于APIView写接口2.2 基于GenericAPIView写的接口2.3 基
- 字符串字符串用''或者""括起来,如果字符串内部有‘或者",需要使用\进行转义>>
- 本文实例为大家分享了python策略模式代码,供大家参考,具体内容如下"""策略模式""&
- 本文实例为大家分享了js canvas随机粒子特效的具体代码,供大家参考,具体内容如下前言canvas实现前端的特效美术结果展示代码html
- 请问如何在ASP中使用ADO调用Oracle的存储过程?我们可以在下面的代码里使用微软Oracle 的OLE DB Provider ,包括