您的位置：首页 > 网站优化 > css  >  position:relative absolute无法冲破

position:relative absolute无法冲破

 更新时间：2017年7月6日 23:13  点击：2287

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

<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;} 
Source Code to Run [www.111cn.net]
/**/

第一块
第二块
第三块
第四块
第五块

试一下很容易发现我们的子级，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，并且属性都需要一样怎么办？当然我们不大会需要有这样的效果。但是我们需要有这样的效果：子级全部是隐藏的，当有鼠标反应时出现并且浮在所有的内容之上。我们要知道，这确实是件让人头疼的事，因为我们上面见识到了，子级在显示的时候都被压在了下一个父级标签的下面。

[!--infotagslink--]

相关文章

  • Postgresql 解决pg掉电后无法重启的问题

    这篇文章主要介绍了Postgresql 解决pg掉电后无法重启的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-01-18

  • CSS中position属性之fixed实现div居中

    这篇文章主要介绍了CSS中position属性之fixed实现div居中的相关资料,需要的朋友可以参考下...2015-12-16

  • position:relative absolute无法冲破

    前段时间记得好像是谁在群里提出了一个实在是让大家都觉得很不理解的一个问题： <ul> <li>第一块</li> <li><span>第二块</span></li> <li>第三块</li> <l...2017-07-06

  • 解决无法加载php_oci8.dll的问题：

    后来考虑可能是系统path环境变量设置的问题，于是就参考安装了oracle的Winnt下的path变量值，发现W2K的path变量值中无“%driver%:oracleora81in;”（可能是操作系统不同造...2016-11-25

  • 通过设置CSS中的position属性来固定层的位置

    position 属性规定元素的定位类型,这个属性定义建立元素布局所用的定位机制,本文给大家介绍通过设置CSS中的position属性来固定层的位置，感兴趣的朋友一起学习吧...2015-12-16

  • jQuery position() 函数详解以及jQuery中position函数的应用

    position()函数用于返回当前匹配元素相对于其被定位的祖辈元素的偏移，也就是相对于被定位的祖辈元素的坐标。该函数只对可见元素有效，通过本文给大家介绍jQuery position() 函数详解以及jQuery中position函数的应用，感兴趣的朋友一起学习吧...2015-12-16

  • 解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法

    下面小编就为大家带来一篇解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2017-05-09

  • Android动态设置RelativeLayout控件的高度例子

    RelativeLayout控件在android开发应用到非常的多了，下文我们就来看一篇关于Android动态设置RelativeLayout控件的高度例子，具体的代码如下所示。 在做项目的时候，其...2016-10-02

  • 淘宝API返回的json数据无法用json_decode的问题

    本文章来给各位介绍我在使用淘宝 API 返回的json数据无法用json_decode的问题的一些解决办法介绍，大家可参考。 如题，这个问题困扰我已久。。。经过自己的多次尝试，...2016-11-25

  • Android RelativeLayout 属性用法详解

    本文章来给大家介绍Android RelativeLayout 属性用法详解,有需要了解RelativeLayout 属性的同学可进入参考参考。 // 相对于给定ID控件 代码如下 复制...2016-09-20

  • php cookie无法保证解决方法

    cookie存在客户端，跟服务器没有关系的，注意你程序里大小写问题，linux是大小写敏感的，还有php教程的配置，比如是否 register_globals = Off 的配置在两边都一样等等...2016-11-25

  • php header中Content-disposition用法详细

    本文章详细的介绍了关于php header中Content-disposition用法详细，有需要了解header用法的朋友可参考一下。 Content-disposition 是 MIME 协议的扩展，MIME 协议指...2016-11-25

  • position:fixed;在android下无效

    在做手机应用网站时使用到position时会发现无效了，但碰到这种问题的情况比较少，因为一般搞手机应用开发都会加上那么一句话，有了它就解决了。 解决办法。 代...2016-09-20

  • C/C++中组合详解及其作用介绍

    这篇文章主要介绍了C/C++中组合的详解及其作用介绍，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-09-04

  • oracle中解决汉字无法显示、输入问题

    在用Oracle 8.0/2000的机器上安装时，语言请选择English(用户的机器选择Simplified Chinese)，然后再用Regedit进行注册表编辑，选取“我的电脑”中的“HKEY_LOCAL_MACHINE...2016-11-25

  • Android五大布局教程LinearLayout、FrameLayout、AbsoulteLayout、RelativeLayout和TableLayout

    本教程主要讲讲Android五大布局，即LinearLayout（线性布局）、FrameLayout（单帧布局）、RelativeLayout（相对布局）、AbsoluteLayout（绝对布局）和TableLayout（表格布局）。 Androi...2016-09-20

  • 无法载入 mysql 扩展，请检查 PHP 配置

    今天在安装一台新服务器时在服务器中配置phpMyAdmin ,但打开时phpmyadmin错误 无法载入 mysql 扩展，请检查 PHP 配置，下面我来给大家介绍解决办法。 无法载入 mysql...2016-11-25

  • Position属性之relative用法

    Relative是position的一个属性，是相对定位，通过本篇文章给大家介绍Position属性之relative用法，对position属性relative相关知识感兴趣的朋友一起学习吧...2015-12-16

  • 无法载入 mysql 扩展 请检查 PHP 配置

    今天在配置apache与php环境时个人感觉配置好了，自己写了测试php文件都是可以成功执行了，但是在运行 phpMyAdmin时提示无法载入 mysql 扩展， 请检查 PHP 配置，后来经过排...2016-11-25

  • firefox提示：内容编码错误 无法显示您尝试查看的页面

    今天打帮客户整理一个网站时发现在firefox提示：内容编码错误 无法显示您尝试查看的页面，因为它使用了无效或者不支持的压缩格式了，我一看客户是php站，导致原因可能是ob_gz...2016-11-25