z-index数值与层叠上下文的创建实例页面

展示

代码

• HTML：

  <div style="position:relative; z-index:auto;">
      <!-- 美女 -->
      <img src="1.jpg" style="position:absolute; z-index:2;">  
  </div>
  <div style="position:relative; z-index:auto;">
      <!-- 美景 -->
      <img src="2.jpg" style="position:relative; z-index:1;">  
  </div>
  
  <div style="position:relative; z-index:0;">
      <!-- 美女 -->
      <img src="1.jpg" style="position:absolute; z-index:2;">  
  </div>
  <div style="position:relative; z-index:0;">
      <!-- 美景 -->
      <img src="2.jpg" style="position:relative; z-index:1;">  
  </div>

• CSS：

  img {
      width: 256px;
  }
  img[src*="2.jpg"] {
      height: 256px;
      margin-left: 20px;
  }