position プロパティ - 基点のテスト

  .Layer1 {
    position: relative;
    top: 0px;
    left: 0px;
    width: 600px;
    height: 400px;
    border: 1px solid red;
  }

  .Layer2 {
    position: absolute;
    top: 0px;
    left: 300px;
    width: 300px;
    height: 400px;
    border: 1px solid blue;
  }

  .Layer3 {
    position: absolute;
    top: 200px;
    left: 0px;
    width: 300px;
    height: 200px;
    border: 1px solid orange;
  }

上の HTML ソースは以下の様になっています。

<div id="Layer1"></div>
<div id="Layer2"></div>
<div id="Layer3"></div>

Layer3 は Layer1 を基点として配置されます。

  .Layer1 {
    position: relative;
    top: 0px;
    left: 0px;
    width: 600px;
    height: 400px;
    border: 1px solid red;
  }

  .Layer2 {
    position: absolute;
    top: 0px;
    left: 300px;
    width: 300px;
    height: 400px;
    border: 1px solid blue;
  }

  .Layer3 {
    position: absolute;
    top: 200px;
    left: 0px;
    width: 300px;
    height: 200px;
    border: 1px solid orange;
  }

上の HTML ソースは以下の様になっています。

<div id="Layer1">
  <div id="Layer2">
    <div id="Layer3">
    </div>
  </div>
</div>

Layer3 は Layer2 を基点として配置されます。