| <!DOCTYPE html> |
| |
| <style> |
| .containing-block { |
| position: relative; |
| width: 150px; |
| height: 150px; |
| outline: 2px black solid; |
| } |
| |
| .cell { |
| width: 50px; |
| height: 50px; |
| } |
| |
| #anchor-cell { |
| position: absolute; |
| top: 50px; |
| left: 50px; |
| |
| background: green; |
| } |
| |
| .anchor-positioned-cell { |
| position: absolute; |
| } |
| |
| #target-1 { |
| top: 0; |
| right: 0; |
| } |
| |
| #target-2 { |
| bottom: 0; |
| left: 0; |
| } |
| |
| #target-3 { |
| bottom: 0; |
| right: 0; |
| } |
| |
| .blue-background { |
| background: blue; |
| } |
| |
| .magenta-background { |
| background: magenta; |
| } |
| |
| .cyan-background { |
| background: cyan; |
| } |
| </style> |
| |
| <body> |
| <div class="containing-block"> |
| <div class="cell" id="anchor-cell"></div> |
| |
| <div class="cell anchor-positioned-cell" id="target-1"> |
| <div class="cell blue-background"></div> |
| </div> |
| |
| <div class="cell anchor-positioned-cell" id="target-2"> |
| <div class="cell magenta-background"></div> |
| </div> |
| |
| <div class="cell anchor-positioned-cell" id="target-3"> |
| <div class="cell cyan-background"></div> |
| </div> |
| </div> |
| </body> |
