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

huaqi_

已于 2022-07-25 18:07:29 修改

阅读量145

点赞数

分类专栏：一些好玩的文章标签： css css3 html

于 2022-07-25 17:47:00 首次发布

本文链接：https://blog.csdn.net/huaqi_/article/details/125979911

版权

一些好玩的专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文探讨了CSS中一种特殊的绝对定位方式——无依赖绝对定位，即不设置left/top/right/bottom属性的绝对定位。通过这种方式，作者在《CSS世界》中提出了一种实现圣杯三栏布局的解决方案，该布局不依赖于其他CSS属性。读者可以通过JSbin实例进行实践操作。

摘要由CSDN通过智能技术生成

引用自笔者的《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>