基于“无依赖绝对定位”实现的圣杯三栏布局

引用自笔者的《CSS 世界》阅读笔记。

前置问题：若一个绝对定位元素，没有任何 left/top/right/bottom 属性设置，并且其祖先元素全部都是非定位元素，其位置在哪里？
仍是在当前位置。
注：absolute 是非常独立的 CSS 属性值，其样式和行为表现不依赖其他任何 CSS 属性就可以完成。
作者将这种无 top/right/bottom/left 属性值的绝对定位称为无依赖绝对定位。

<style> /* huaqi_ 版本圣杯布局实现 */ #container {
       /* 此处声明 relative 不影响无依赖定位 为使 .right 声明 margin-left: 100% 生效，需要确定其容器 */ position: relative; height: 200px; margin-left: 150px; margin-right: 200px; } p {
       position: absolute; } .center {
       width: 100%; height: 100px; background-color: rgba(255, 0, 0, 0.7); } .left {
       width: 150px; height: 100px; margin-left: -150px; background-color: rgba(0, 0, 255, 0.6); } .right {
       width: 200px; height: 100px; margin-left: 100%; background-color: rgba(33, 33, 33, 0.6); } </style>

<!-- 圣杯布局 -->
   	<div id="container" class="clearfix">
      <p class="center">中间内容</p>
      <p class="left">左侧内容</p>
      <p class="right">右侧内容</p>
    </div>

JSbin – 实践