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

<!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 > 
 
转至：http://www.cnblogs.com/zc_0101/archive/2009/12/18/1627046.html