CSS进阶08-绝对定位 Absolute Positioning

love丁酥酥

发布于 2018-08-27 15:29:39

5040

发布于 2018-08-27 15:29:39

文章被收录于专栏：coding for lovecoding for love

（注1：如果有问题欢迎留言探讨，一起学习！转载请注明出处，喜欢可以点个赞哦！）

（注2：更多内容请查看我的目录。）

1. 简介

在绝对定位模型中，盒根据其包含块显式偏移。盒从标准流中完全脱离（对后来的同胞元素没有影响）。绝对定位盒为其标准流的子元素和绝对定位（非固定定位）后代创建新的包含块。然而，绝对定位元素的内容不在任何其他盒的流中，它们可能遮挡其他盒的内容（或被遮挡），这取决于重叠盒子的堆叠层级stack levels 。

2. 固定定位 Fixed positioning

固定定位是绝对定位的子类。唯一的区别在于，固定定位盒的包含块是由视口创建的。在连续媒体中，当文档滚动时，固定盒不会移动。就这点来讲，它们同固定背景图片fixed background images相像。在分页媒体paged media中，固定定位盒在每一页重复。这对布局很有用，比如，在每个页面的底部放置签名。比页面区域要大的固定定位盒将会被裁剪。固定定位盒在初始化包含块中不可见的部分将不会打印。

开发者可以使用固定定位去创建框架式frame-like布局。考虑如下框架布局：

这可以通过如下HTML文档和样式规则实现：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>A frame document with CSS 2.1</title>
<style type="text/css" media="screen">
   body { height: 8.5in }/* 计算百分百高度需要 */
   #header {
      position: fixed;
      width: 100%;
      height: 15%;
      top: 0;
      right: 0;
      bottom: auto;
      left: 0;
   }
   #sidebar {
      position: fixed;
      width: 10em;
      height: auto;
      top: 15%;
      right: auto;
      bottom: 100px;
      left: 0;
   }
   #main {
      position: fixed;
      width: auto;
      height: auto;
      top: 15%;
      right: 0;
      bottom: 100px;
      left: 10em;
   }
   #footer {
      position: fixed;
      width: 100%;
      height: 100px;
      top: auto;
      right: 0;
      bottom: 0;
      left: 0;
   }
</style>
</head>
<body>
   <div id="header"> ...  </div>
   <div id="sidebar"> ...  </div>
   <div id="main"> ...  </div>
   <div id="footer"> ...  </div>
</body>
</html>