Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

定位 #13

Open
xiongshj opened this issue Aug 13, 2019 · 0 comments
Open

定位 #13

xiongshj opened this issue Aug 13, 2019 · 0 comments

Comments

@xiongshj
Copy link
Owner

定位

这是学习《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;
}

小结

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant