<div class="container">
  <!--  从这里开始计算容器层数  -->
  <div class="right-wrap">
    <div class="mid-wrap">
      <div class="left-wrap">
        <div class="left">左<br />颜色属于第三层(即当前父容器).left-wrap</div>
        <div class="mid">中<br /><br /><br /><br /><br /><br /><br /><br /><br />颜色属于第二层容器 .mid-wrap</div>
        <div class="right">右<br />颜色属于第一层(即最外层容器).right-wrap</div>
      </div>
    </div>
  </div>
</div>
.container {width: 500px; margin: 0 auto; overflow: hidden;}

.right-wrap {width: 100%; float: left; position: relative; overflow: hidden; background-color: skyblue;}
.mid-wrap {width: 100%; float: left; position: relative; right: 80px;/*.right 的宽度*/ background-color: pink;}
.left-wrap {width: 100%; float: left; position: relative; right: 300px;/*.mid 的宽度*/ background-color: tomato;}
.left {width: 120px; float: left; position: relative; left: 380px;/*除  .left 外兄弟元素宽度之和*/}
.mid {width: 300px; float: left; position: relative; left: 380px;}
.right {width: 80px; float: left; position: relative; left: 380px;}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.