定位元素中百分比的参照值

百分比的参照值

开启定位的元素中，属性 width, height, padding, margin, left 和 top 的属性值都可以使用百分比的形式，以下就是它们各自的参照对象：

• 元素的 width & height：百分比的属性值参照于其包含块的 width & height
• 元素的 padding & margin：百分比的属性值参照于其包含块的 width
• 元素的 top：百分比的属性值参照于其包含块的 height
• 元素的 left：百分比的属性值参照于其包含块的 width

代码示例：

• html部分

<div class="container">
   <div class="wrapper">
      <div class="box"></div>
   </div>
</div>

• css部分

.container {
      width: 500px;
      height: 600px;
      background-color: #bfa;
      position: relative;
      margin: 100px;
      padding: 100px;
}
.wrapper {
      width: 300px;
      height: 300px;
      background-color: green;
}
.box {
      width: 50%;                 /* width = 250px */
      height: 50%;                /* height = 300px */
      background-color: yellow;
      position: absolute;
      margin: 10%;                /* margin = 50px */
      padding: 10%;               /* padding = 50px */
      left: 20%;                  /* left = 100px */
      top: 20%;                   /* top = 120px */
}

注意：包含块是离该元素最近的，且已开启定位的父级或祖先级块元素