z-index负值与层叠上下文实例页面

展示

.box非层叠上下文元素

.box是层叠上下文元素

代码

• HTML：

  <h4>.box非层叠上下文元素</h4>
  <div class="box">
      <img src="1.jpg">
  </div>
  
  <h4>.box是层叠上下文元素</h4>
  <div class="box context">
      <img src="1.jpg">
  </div>

• CSS：

  .box {
      background-color: blue;
  }
  .box > img { 
      position: relative; 
      z-index: -1; 
      right: -50px;
  }
  
  .context {
      transform: scale(1);
  }