z-index ie6下的如何解决方案

网络
这是初夏，陽光灿烂，海水湛蓝，海鸥轻巧地向船桅间滑过，生命是多彩的，充满了青春的欢乐。
XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <htmlxmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
  5. <metaname="author"content="Chomo"/>
  6. <linkrel="start"rel="nofollow noopener noreferrer" href="http://www.14px.com"title="Home"/>
  7. <title>法则五：非同辈元素，任意一者或其祖元素拥有动态定位时，同时各自向上寻找动态定位的祖元素，并分别从中拿出具备最高级别的祖元素（或其本身）进行比较。</title>
  8. </head>
  9. <styletype="text/css">
  10. div{font:12px/1.5arial;}
  11. divstrong{color:#fff;background:#036;display:inline-block;}
  12. h3strong{color:#f00;}
  13. /*---定义方块外形---*/
  14. .div1,
  15. .div2{
  16. height:70px;
  17. width:150px;
  18. background:#cff;
  19. border:1pxsolid#036;
  20. }
  21. .grandDiv1,
  22. .grandDiv2{
  23. padding:10px;
  24. border:1pxsolid#060;
  25. width:174px;
  26. background:#cf9;
  27. }
  28. .parentDiv1,
  29. .parentDiv2{
  30. padding:10px;
  31. border:1pxsolid#f06;
  32. width:152px;
  33. background:#fcf;
  34. }
  35. /*---定义方块偏移位置、文字位置---*/
  36. .grandDiv2{
  37. margin-top:-50px;
  38. margin-left:95px;
  39. }
  40. .parentDiv2{
  41. margin-top:-40px;
  42. margin-left:85px;
  43. }
  44. .div2{
  45. margin-top:-20px;
  46. margin-left:75px;
  47. padding-top:30px;
  48. height:40px;
  49. }
  50. .grandDiv2.parentDiv2,
  51. .grandDiv2.div2,
  52. .parentDiv2.div2{margin:0;}
  53. </style>
  54. <body>
  55. <h3>法则五<strong>（重要）</strong>：非同辈元素，任意一者或其祖元素拥有动态定位时，同时各自向上寻找动态定位的祖元素至共有的祖元素的下一级为止，并分别从中拿出具备最高级别的祖元素（或其本身）进行比较。</h3>
  56. <p>情况1：子元素的z-index无论多大，父元素大者居上。<p>
  57. <divclass="parentDiv1"style="position:relative;z-index:2;">
  58. .parentDiv1{position:relative;<strong>z-index:2</strong>}
  59. <divclass="div1">.div1{position:static}</div>
  60. </div>
  61. <divclass="parentDiv2"style="position:relative;z-index:1;">
  62. <divclass="div2"style="position:relative;z-index:10000;">.div2{position:relative;<strong>z-index:10000</strong>}</div>
  63. .parentDiv2{position:relative;<strong>z-index:1</strong>}
  64. </div>
  65. <p>情况2：父元素居下，子元素也可以居上。<p>
  66. <divclass="parentDiv1">
  67. .parentDiv1{position:staitc}
  68. <divclass="div1"style="position:relative;">.div1{position:relative}</div>
  69. </div>
  70. <divclass="parentDiv2">
  71. <divclass="div2">.div2{position:staitc}</div>
  72. .parentDiv2{position:staitc}
  73. </div>
  74. <p>情况1、情况2结合扩展比较。<p>
  75. <divclass="grandDiv1"style="position:relative;z-index:3;">
  76. .grandDiv1{position:relative;<strong>z-index:3</strong>}
  77. <divclass="parentDiv1">
  78. .parentDiv1{position:staitc}
  79. <divclass="div1"style="position:relative;z-index:10000;">.div1{position:relative;<strong>z-index:10000</strong>}</div>
  80. </div>
  81. </div>
  82. <divclass="grandDiv2">
  83. <divclass="parentDiv2"style="position:relative;z-index:4;">
  84. <divclass="div2">.div2{position:staitc}</div>
  85. .parentDiv2{position:relative;<strong>z-index:4</strong>}
  86. </div>
  87. .grandDiv2{position:static;}
  88. </div>
  89. </body>
  90. </html>

以上就是z-index ie6下的如何解决方案。真正的快乐，不是狂喜，亦不是痛苦，它是细水长流，碧海无波，在芸芸众生中做一个普通的人，享受生命一刹那的喜悦。更多关于z-index ie6下的如何解决方案请关注haodaima.com其它相关文章！

您可能有感兴趣的文章
css 层叠与z-index的示例代码
CSS z-index 层级关系优先级的概念
深入剖析z-index属性
详解CSS中的z-index属性在层叠布局中的用法
css3的transform造成z-index无效如何解决方案