relative absolute无法冲破的等级问题解决第1/3页

前段时间记得好像是谁在群里提出了一个实在是让大家都觉得很不理解的一个问题： 


代码如下:

<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;}

当前1/3页 123下一页阅读全文

赞 (0)

相关推荐

  • javascript css styleFloat和cssFloat

    下面是兼容性代码 复制代码 代码如下: LTFunction.setFloatStyle=function(obj,style) { var sty=obj.style; if('cssFloat' in sty){ obj.style.cssFloat=style; }else if('styleFloat' in sty){ obj.style.styleFloat=style; }else{ throw 'set float style:'+style+'error.'; } }

  • javascript下操作css的float属性的特殊写法

    使用js操作css属性的写法是有一定的规律的: 1.对于没有中划线的css属性一般直接使用style.属性名即可.  如:obj.style.margin,obj.style.width,obj.style.left,obj.style.position等. 2.对于含有中划线的css属性,将每个中划线去掉并将每个中划线后的第一个字符换成大写即可.  如:obj.style.marginTop,obj.style.borderLeftWidth,obj.style.zIndex,obj.styl

  • position:relative/absolute无法冲破的等级

    注:本文实例在IE5.x下可能会显示不出来,请使用IE6.IE7.Firefox.Opera等浏览器来调试! 前段时间记得好像是谁在群里提出了一个实在是让大家都觉得很不理解的一个问题:  复制代码 代码如下: <ul>   <li>第一块</li>   <li><span>第二块</span></li>   <li>第三块</li>   <li>第四块</li>   <

  • 详细分析css float 属性以及position:absolute 的区别

    详细分析css float 属性以及position:absolute 的区别

    1.float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素.div一个典型的块级元素,会单独占据一行. 先看看最基本的块级元素如何排列的.html代码,以下样式都是基于此. 复制代码 代码如下: <div class="boxBg">        <div class="box1">        框框1       

  • CSS中Float（浮动）相关技巧文章

    Float(浮动)概念也许是CSS中最让人迷惑的一个概念吧.Float经常被错误理解,而且因为将上下文元素全部浮动导致的可读性.可用性问题备受责难.然而,这些问题的根源并不在于理论本身,而是开发人员以及浏览器对理论的解读造成的. 如果你认真的去读一下浮动概念,你会发现并不像所见的那样复杂.大多数问题都是由于老版本的IE带来的(我只是猜想).如果你知道这些bug,你就能避免这些问题. 让我们尝试去解决这些问题并澄清一些以前使用浮动的误解.我们参考了成打的相关文章,并选取了最为重要的一些你必须了解的

  • Div CSS absolute与relative的区别小结

    详细讲解两者的关系,需要配合例子,请先看例子: 以下是引用片段: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>

  • javascript css float属性的特殊写法

    1.对于没有中划线的css属性一般直接使用style.属性名即可. 如:obj.style.margin,obj.style.width,obj.style.left,obj.style.position等. 2.对于含有中划线的css属性,将每个中划线去掉并将每个中划线后的第一个字符换成大写即可. 如:obj.style.marginTop,obj.style.borderLeftWidth,obj.style.zIndex,obj.style.fontFamily等. 这个规律我想大多数的前

  • 解决rs.absolutepage=-1的问题

    有时候在做asp的分页程序的时候会遇到无法分页的情况,就试着把rs.absolutepage打印出来结果却一直为-1. 下面介绍一种解决方案: .......省略 rs.cursorlocation=3 '就是加上这行 rs.open sql,conn,3,2 rs.pagesize=10 if not rs.eof then rs.absolutepage=1 end if pagecount=rs.pagesize .........省略

  • CSS定位中Positoin、absolute、Relative的一些研究

    Positoin属性有四个值: static.fixed.absolute和relative,后面两个在布局中的定位里是经常用到的,顾名思义,absolute是指绝对定位,即将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位,而其层叠通过z-index属性定义.此时对象不具有边距,但仍有补白和边框.ralative是指相对定位,就是依据left,right,top,bottom等属性在正常文档流中偏移位置. 但是,怎么个绝对法,又怎么个相对法呢?以前我一直没有

  • css position: absolute、relative详解

    CSS2.0 HandBook上的解释: 设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局.假如其他具有不同 z-index 属性的对象已经占据了给定的位置,他们之间不会相互影响,而会在同一位置层叠.此时对象不具有外补丁( margin ),但仍有内补丁( padding )和边框( border ). 要激活对象的绝对(absolute)定位,必须指定 left , right , top , bottom 属性中的至少一个,并且设置此属性值为 ab

  • css 跨浏览器实现float:center

    复制代码 代码如下: <div id="macji"> <ul class="macji-skin"> <li>列表一</li> <li>列表二</li> <li>列表三</li> </ul> </div> 我们希望实现li是浮动的,并且居中的(li个数不固定,ul宽度未知).可以设置ul的text-align:center,再设置li的displ

随机推荐