CSS同辈元素定位方式与z-index的总结_html-js-css

概述网(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&q…

　　内存溢出 jb51.cc 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,则数值大者居上</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,则数值大者居上</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,则数值大者居上</td></tr></table></body></HTML><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.wfuyu.com/' target='_blank'>http://www.wfuyu.com/</a></center>
提示：可修改后代码再运行!

总结

以上是内存溢出为你收集整理的CSS同辈元素定位方式与z-index的总结全部内容，希望文章能够帮你解决CSS同辈元素定位方式与z-index的总结所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: https://outofmemory.cn/web/1025617.html

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

发表评论

评论列表（0条）