定位

[xiongshj]

定位

这是学习《CSS 权威指南》第 11 章的笔记。

基本概念

定位的类型

定位类型使用 position 属性指定，有五种类型：

（1）static（初始值）。正常生成元素框。块级元素生成矩形框，位于文档流中；行内元素生成一个或多个行框，随父元素流动。

（2）relative。元素偏移一定的距离。元素的形状与未定位时一样，而且元素所占的空间也与正常情况下相同。

（3）absolute。元素框完全从文档流中移除，相对容纳块定位。此时，容纳块可能是文档中的另一个元素，也可能是初始容纳块。正常情况下元素在文档流中占据的空间不复存在，好似元素没有出现过一样。不管元素在常规的文档流中生成什么类型的框体，定位后生成的都是块级框。

（4）fixed。元素框的行为类似于 absolute，不过容纳块是视区自身。

（5）元素一开始留在常规的文档流中，达到触发粘滞的条件时，从常规的文档流中移除，不过在常规文档流中占据的空间得以保留。此时，相当于相对容纳块绝对定位。触发粘滞的条件失效后，元素回到常规文档流中最初的位置。

容纳块

对非根元素来说，如果 position 属性的值是 relative 或 static，其容纳块由最近的块级、单元格或行内块级祖辈元素框体的内容边界划定。

对非根元素来说，如果 position 属性的值是 absolute，其容纳块是 position 属性的值不是 static 的最近的祖辈元素（任何类型）。具体规则如下：

• 如果祖辈元素是块级元素，容纳块是那个元素的内边距边界，即由边框限定的区域。
• 如果祖辈元素是行内元素，容纳块是祖辈元素的内容边界。
• 如果没有祖辈元素，元素的容纳块是初始容纳块。

对粘滞定位的元素来说，容纳块的边界由粘滞限定矩形确定。

偏移属性

定位使用四个属性指定定位元素的各边相对容纳块的偏移，这四个属性称为偏移属性。

偏移属性：top、right、bottom 和 left。

内容溢出

溢出使用 overflow 属性，可以取的值有四个：visible、hidden、scroll 和 auto。这个属性适用于块级元素和置换元素，默认值是 visible。

（1）visible 的意思是，超出元素框的内容是可见的。通常，这会导致内容超出所在的元素框，但是对元素框的形状没有影响。

（2）把 overflow 的值设为 scroll 时，元素的内容将在元素框的边界处裁剪（即隐藏），但是被裁剪的内容依然有方法呈现给用户。

设为 scroll 时，平移机制（例如滚动条）应该始终渲染。

（3）把 overflow 的值设为 hidden 时，元素的内容将在元素框的边界处裁剪，而且超出裁剪区的内容无法通过滚动条等页面元素查看。此时，用户看不到被裁剪的内容。

（4）overflow: auto; 这个值让用户代理自己决定使用哪种行为。

元素的可见性

控制整个元素的可见性：visibility。

visibility 可以取的值有：visible、hidden 和 collapse。

初始值是 visible，适用于所有元素，可继承。

visibility: visible; 元素是可见的。

visibility: hidden; 元素不可见，但依然像可见时那样影响文档的布局。也就是说，元素还在那里，只是看不见，就像声明 opacity: 0; 一样。

display: none; 元素不显示，完全从文档中移除。

visibility: collapse; 在渲染表格时使用。根据规范，collapse 与用在非表格元素上的 hidden 具有相同作用。

绝对定位

position: absolute;

绝对定位元素的容纳块

绝对定位的元素完全从文档流中移除，其位置相对容纳块确定，外边距的边界使用偏移属性（top、left 等）划定。

绝对定位元素的容纳块石 position 属性的值不是 static 的最近的祖辈元素。通常，创作人员选定用作绝对定位元素的容纳块的元素后，会把 position 的值设为 relative，而且不设置偏移。

绝对定位的元素是其后代元素的容纳块。

Z 轴上的位置

z-index 用于调整元素之间重叠的方式。

z-index 的值越大，元素离读者的距离越近。因此，值大的元素可能会遮盖其他元素。叠放的优先级称为堆叠次序。

z-index 的值可以设为任何整数，包括负数。

z-index 的值无需连续，想使用多大的整数都可以。

所有后代元素的堆叠次序都相对祖辈元素而言。

z-index: auto; 可以视作 z-index: 0;。

固定定位

position: fixed;

固定定位与绝对定位类似，只不过固定定位元素的容纳块是视区。固定定位的元素完全从文档流中移除，其位置与文档中的任何一部分都没关系。

利用固定定位可以在界面中放一个始终可见的元素，例如一个小的链接列表。我们可以像下面这样创建一个始终可见的页脚，显示版权等信息。

footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: auto;
}

相对定位

position: relative;

img {
  position: relative;
  top: -20px;
  left: -20px;
}

CSS 2.1 规定，如果相对定位出现过约束，把其中一个值设为另一个值的相反数。因此，bottom 始终等于 -top。

strong {
  position: relative;
  top: 10px;
  bottom: 20px;
}

上例将被视作：

strong {
  position: relative;
  top: 10px;
  bottom: -10px;
}

粘滞定位

position: sticky;

偏移属性（top、left 等）用于定义相对容纳块的粘滞定位矩形。

#scrollbox {
  overflow: scroll;
  width: 15em;
  height: 18em;
}

#scrollbox h2 {
  position: sticky;
  top: 2em;
  bottom: auto;
  left: auto;
  right: auto;
}

小结

只需要一些时间，看似复杂的知识点，其实都是纸老虎，会被你一捅就破。