position:relative/absolute 层级关系
来源:互联网 发布:网络最短路径 编辑:程序博客网 时间:2024/06/16 12:16
在ie6中
如果我我们设定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,并且属性都需要一样怎么办?当然我们不大会需要有这样的效果。
但是我们需要有这样的效果:子级全部是隐藏的,当有鼠标反应时出现并且浮在所有的内容之上。
我们要知道,这确实是件让人头疼的事,因为我们上面见识到了,子级在显示的时候都被压在了下一个父级标签的下面。
下面我们来实现一下这个鼠标反应的定位效果:
我们通过链接的鼠标事件来完成这个显示隐藏效果:
*{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才会被赋于一个相对定位的属性。
这样就完成可以解决被其它父级标签所挡的尴尬了。本文来自http://bianceng.cn(编程入门)
当然如果不介意IE5这样的浏览器我们还可以把代码再做简化:
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; }
下面是本人需要的,
当效果是鼠标点击时。
#u li {
float: right;
margin: 13px 10px 0 0;
position:relative;
}
当a连接内有JavaScript:void(0);时,
点击事件在#u li标签上无效,事件要绑定到#u li a。
子级隐藏在li标签里,和 a 同级。
当子级全部隐藏,单击后出现,父级的position:relative,的类是同一个类时,可以这样。
$(function(){
$("#u li a").bind('click',(function(){ //得到当前点击标签
var obj = $(this); //当前点击标签为对象
$("#u li").css("z-index",1); //所有父级标签z-index设为1
$(obj).parent().css("z-index",3); //当前点击标签的父标签z-index设为3
}));
});
如果我我们设定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,并且属性都需要一样怎么办?当然我们不大会需要有这样的效果。
但是我们需要有这样的效果:子级全部是隐藏的,当有鼠标反应时出现并且浮在所有的内容之上。
我们要知道,这确实是件让人头疼的事,因为我们上面见识到了,子级在显示的时候都被压在了下一个父级标签的下面。
下面我们来实现一下这个鼠标反应的定位效果:
我们通过链接的鼠标事件来完成这个显示隐藏效果:
*{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才会被赋于一个相对定位的属性。
这样就完成可以解决被其它父级标签所挡的尴尬了。本文来自http://bianceng.cn(编程入门)
当然如果不介意IE5这样的浏览器我们还可以把代码再做简化:
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; }
下面是本人需要的,
当效果是鼠标点击时。
#u li {
float: right;
margin: 13px 10px 0 0;
position:relative;
}
当a连接内有JavaScript:void(0);时,
点击事件在#u li标签上无效,事件要绑定到#u li a。
子级隐藏在li标签里,和 a 同级。
当子级全部隐藏,单击后出现,父级的position:relative,的类是同一个类时,可以这样。
$(function(){
$("#u li a").bind('click',(function(){ //得到当前点击标签
var obj = $(this); //当前点击标签为对象
$("#u li").css("z-index",1); //所有父级标签z-index设为1
$(obj).parent().css("z-index",3); //当前点击标签的父标签z-index设为3
}));
});
- position:relative/absolute 层级关系
- position: absolute、relative
- position absolute,relative 定位
- position属性:absolute&relative
- Position定位:relative | absolute
- position absolute和relative
- Position定位:relative | absolute
- css position: absolute relative
- Position定位:relative | absolute
- position(relative和absolute)
- Position定位:relative | absolute
- position:relative and absolute
- 详解position: absolute、relative
- Position:fixed relative absolute
- position: static absolute relative
- position:absolute和relative
- position:relative absolute
- Position 解析 absolute、relative
- 关于Servlet与Applet的澄清,进行大文件上传
- Asp.net中使用GridView的单选按钮
- Nginx和PHP-FPM的启动/重启脚本 [转发]
- Nginx-优点
- 数据挖掘的应用
- position:relative/absolute 层级关系
- 第七章 缓存
- call_user_func函数和call_user_func_array函数
- Java笔记1 Java编程基础<2>循环语句、函数(重载)、变量和数组的内存结构
- Proxool连接池
- date命令使用
- POJ1125--Stockbroker Grapevine
- 数据挖掘领域10大挑战性问题
- Android OTA在线升级一(架构分析)