CSS同辈元素定位方法与z-index的总结

发布时间：2018-09-09 11:14:26 所属栏目：创业来源：站长网

导读：猛火网(LieHuo.Net)教程 CSS同辈元素定位方法与z-index的总结，同辈元素定位方法沟通，且无z-index配置时，html靠后者居上，请看下面的示例源码： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-t

　　猛火网(LieHuo.Net)教程 CSS同辈元素定位方法与z-index的总结，同辈元素定位方法沟通，且无z-index配置时，html靠后者居上，请看下面的示例源码：

<!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> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title>同辈元素定位方法沟通，且无z-index配置时，html靠后者居上 - liehuo.net</title> </head> <style type="text/css"> div { font:12px/1.5 arial;} div strong { color:#fff; background:#036; display:inline-block;} h3 strong { color:#f00;} /*--- 界说方块形状 ---*/ .div1, .div2 { height:70px; width:150px; background:#cff; border:1px solid #036; } .div2 { margin-top:-20px; margin-left:75px; padding-top:30px; height:40px; } td{ height:200px; width:350px; border:solid 1px #C69;} </style> <body> <h3> 法例一:同辈元素各类环境较量<br />民众样式：<br /> <span style="color:#F6C"> .div1,<br /> .div2 {<br /> height:70px;<br /> width:150px;<br /> background:#cff;<br /> border:1px solid #036;<br /> }<br /> .div2 {<br /> margin-top:-20px;<br /> margin-left:75px;<br /> padding-top:30px;<br /> height:40px;<br /> }<br /> </span> </h3> <table cellpadding="1" cellspacing="0" border="0"> <tr> <td> <div class="div1">.div1{position:static;}</div> <div class="div2">.div2{position.static;}</div> </td> <td> <div class="div1" style=" z-index:2;">.div1{position:static; z-index:2;}</div> <div class="div2" style=" z-index:1;">.div2{position:static; z-index:1;}</div> </td> <td>结论：同为静态定位，html靠后者居上，而且假若有z-index也无效；虽然，假如静态定位碰着动态定位，也必定是要逊色而居下的。</td> </tr> <tr> <td> <div class="div1" style="position:relative;">.div1{position:relative}</div> <div class="div2" style="position:relative;">.div2{position:relative}</div> </td> <td> <div class="div1" style="position:relative; z-index:2">.div1{position:relative; z-index:2}</div> <div class="div2" style="position:relative; z-index:1">.div2{position:relative; z-index:1}</div> </td> <td>结论：同为动态relative定位时，假如没有z-index,则html靠后者居上,假若有z-index,则数值大者居上</td> </tr> <tr> <td> <div class="div1" style="position:absolute;">.div1{position.absolute}</div> <div class="div2" style="position:absolute;">.div2{position.absolute}</div> </td> <td> <div class="div1" style="position:absolute; z-index:2">.div1{position:absolute; z-index:2}</div> <div class="div2" style="position:absolute; z-index:1">.div2{position:absolute; z-index:1}</div> </td> <td>结论：同为动态absolute定位时，假如没有z-index,则html靠后者居上,假若有z-index,则数值大者居上</td> </tr> <tr> <td> <div class="div1" style="position:relative;">.div1{position.relative}</div> <div class="div2" style="position:absolute;">.div2{position.absolute}</div> </td> <td> <div class="div1" style="position:relative; z-index:2">.div1{position:relative; z-index:2}</div> <div class="div2" style="position:absolute; z-index:1">.div2{position:absolute; z-index:1}</div> </td> <td>结论：同为动态定位时，假如没有z-index,则html靠后者居上,假若有z-index,则数值大者居上</td> </tr> <tr> <td> <div class="div1" style="position:absolute; zoom:1;">.div1{position.absolute}</div> <div class="div2" style="position:relative; zoom:1;">.div2{position.relative}</div> </td> <td> <div class="div1" style="position:absolute; z-index:2; zoom:1;">.div1{position:absolute; z-index:2}</div> <div class="div2" style="position:relative; z-index:1; zoom:1;">.div2{position:relative; z-index:1}</div> </td> <td>结论：同为动态定位时，假如没有z-index,则html靠后者居上,假若有z-index,则数值大者居上</td> </tr> </table> </body> </html><br /><center>如不能表现结果，请按Ctrl+F5革新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提醒：可修改儿女码再运行!

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

2021创业做什么好？低	香港虚拟主机，香港虚
《启航当风起时》起于	域名最网站至关重要如