<!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=utf-8" /> |
< title >同辈元素定位方式相同,且无z-index设置时,html靠后者居上。</ 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 > |
如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛