合买大神
网站首页 网站建设 公司动态 行业新闻 案例展示 关于我们

文章内容

定位属性在元素中的层级关系

日期:2013-11-26  来源:攀枝花惠康网络公司

在此刻项目产物的前端开发中跟着交互的增多,再加上html结构的语义化要求,元素的层级关系加倍主要了,经常页面会呈现页面某些元素会被其他元素润饰藻饰,?#32423;?#26102;辰我们经由过程position:relative或position:absolute,及z-index值来改变元素的层级,可是z-index过多或其值如不美观没有充实考虑的话,元素的层级关系会很是复杂。我这里只总结了position:relative和position:absolute在?#20540;?#20803;素中的一些层级关系,?#26032;?#22833;踪或者不足的处所,接待巨匠留言填补和赐正。

在了看一个近似的例子:

2009-12-21_193043

注重:这里把position : static这个默认的定位属性值赞成认为没有定位,position:relative、position:absolute和position:fixed都认为是有定位 。position:fixed在ie6下未撑持,所以本位不做实例,在其他浏览器下同样合用。

一、在没有定位属性的?#20540;?#20803;素中,?#35805;?#22312;html结构下面的元素层级高于结构膳缦沔的元素。

可能表达不清嚣张,看一?#26410;?#30721;吧:


<div style="width:400px; height:200px; background:#000; color:#FFF">结构膳缦沔的元素:width:400px; height:200px;<br />
这里黑色的可见高度是150px,还有50px被红色的元素遮罩了(margin-top:-50px)。</div>
<div style="width:500px; height:100px;background:red; margin-top:-50px;color:#FFF">结构下面的元素:width:500px; height:100px;</div>


如图显示:

2009-12-21_192737

=====================朋分线===========================


<div style="width:400px; height:200px; background:#000; color:#FFF;margin-bottom:-110px;">结构膳缦沔的元素:width:400px; height:200px;<br />
这里黑色的可见高度加起来是100px,还有100px被红色的元素遮罩了。</div>
<div style="width:500px; height:100px;background:red;color:#FFF">结构下面的元素:width:500px; height:100px;</div>


如图显示:

这两个例子充实说了然?#35805;?#24773;形下:没有定位的?#20540;?#20803;素中,在html结构下面的元素层级高于结构膳缦沔的元素。

二,?#20540;?#20803;素中有定位属性的元素层级高于没有这两个属性的其他?#20540;?#20803;素。

看一个在结构膳缦沔元素上加position:absolute例子,这个可能巨匠很常用:


<div style="width:400px; height:200px; background:#000; color:#FFF; position:absolute">结构膳缦沔的元素:width:400px; height:200px;<br />
这里黑色的可见高度加起来是200px,红色的元素被遮罩了。</div>
<div style="width:500px; height:100px;background:red; color:#FFF">结构下面的元素:width:500px; height:100px;</div>


2009-12-21_194510


<div style="width:400px; height:200px; background:#000; color:#FFF; position:relative">结构膳缦沔的元素:width:400px; height:200px;<br />
这里黑色的可见高度加起来是200px,红色的元素的50高度被遮罩了。</div>
<div style="width:500px; height:100px;background:red; margin-top:-50px; color:#FFF">结构下面的元素:width:500px; height:100px;</div>


如图显示:

2009-12-21_195551

三、?#20540;?#20803;素中有position:relative和position:absolute定位属性的元素,结构下面的元素层级高于结构膳缦沔的元素,可是有z-index设置时,z-index?#30340;?#22812;者居上。

看一个在例子:

看一个在结构膳缦沔元素上加position:relative例子,这个可?#26434;?#26469;做?#32423;?#24037;作,出格是选项效不美观,还?#24615;?#32032;不想脱离文档流的时辰:


<div style="width:500px; height:140px; background:#000; position:relative; z-index:100"></div>
<div style="position:absolute;top:0; width:600px; height:120px;background:red; z-index:99"></div>


四、非?#20540;?#20803;素,肆意一者或其祖元素拥有动态定位时,同时各自向上寻找动态定位的祖元素,并分袂年夜中拿出具备第一流此外祖元素(或其自己)进行斗劲。

=====================朋分线===========================

1.子元素的z-index无论多年夜,父元素年夜者居上,如图:

05

2.父元素居下,子元素也可以居上,如图:


<div style="width:800px; height:160px; background:#CDCDCD">
<div style="width:500px; height:140px; background:#000; position:relative; z-index:100">这个在最上层</div>
<div style="position:absolute;top:0; width:600px; height:120px;background:red; z-index:99"></div>
</div>
<div style="background:#00F;width:600px; height:130px; margin-top:-50px"></div>


,如图:

06

或者看这?#26410;?#30721;:

07

如图显示:

?#26032;?#22833;踪或者不足的处所,接待巨匠留言填补和赐正。

文章来源:攀枝花惠康网络公司

惠康网络,是一家专业从事攀枝花网站建设,攀枝花网站制作,攀枝花网站设计公司,提供网站建设一条龙服务(网站域名注册+网站服务器租用+网站开发+网站维护+网站营销推广),惠康网络立足攀枝花,辐射全中国,攀枝花惠康网络的客户已经遍布国内各地大中小城市,我们高效优质的网站建设服务深受?#27809;?#22909;评。

客服?#35748;擼?img src="skin/images/tel.png" alt="tel" height="15" width="84" style="vertical-align:middle;">(谢先生)  客服QQ:1323605005  
服务邮箱:[email protected](售前咨询)  [email protected](技术部)  [email protected](售后服务)
公司地址:四川省攀枝花市
?#26102;啵?/span>617200

合买大神 快乐十分钟预测软件 大板樱花vs川崎前锋 黑龙江时时彩走势图 门兴vs法兰克福 维多利亚水晶宫 悉尼fc赛程 阿森纳vs切尔西 莱万特对阵赫罗纳预测 巴萨vs皇家贝蒂斯 莱斯特大学在中国算几流大学