Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

[翻译] W3C-CSS-2.1-9.3 定位机制

翻译:次碳酸钴
鼠标hover可见原文,如果发现错误请@我以便修正,谢谢捧场~

定位机制(9.3)

在CSS2.1中,盒子可能会依照这三个定位机制来布局:

  1. 常规流: 在CSS2.1中,常规流包含block级盒子的block渲染、inline盒子的inline渲染、block级和inline级盒子的相对定位。
  2. 浮动: 在浮动模型中,盒子先按照常规流的布局,然后把它从流中取出,并尽可能远的向左或向右移。 内容会沿着float元素的侧边流入float元素原来的位置。
  3. 绝对定位: 在绝对定位模型中,盒子会从流中被完全移出,并根据它的含纳块来指定它的位置。

如果一个元素是浮动或绝对定位或根元素,那么我们就说它在流外。 如果一个元素不在流外,那它就是在流内的。 元素A的流是指,A的后代元素中满足以下条件的元素集合:是流内元素,且最近的流外先祖元素是A(因为A相对于自己的后代元素是根元素,是流外的)。

注意:CSS2.1的定位机制通过允许使用回避标签的手法(比如,使用不可见的图片)来实现布局效果,以让开发者的文档结构容易理解。

选择一个定位机制:position属性(9.3.1)

position和float属性决定了计算盒子的位置时使用何种CSS2.1中的定位算法。

position
  • 可用值:static | relative | absolute | fixed | inherit
  • 初始值:static
  • 适用于:所有元素
  • 继承的:不继承
  • 百分比:无意义
  • 媒体类:所有可视化媒体
  • 计算值:指定的值

这个属性的值有下面这些含义:

static
  • 盒子是普通的盒子,按照常规流来布局。 top、right、bottom、left,这些属性都不应用于它。
relative
  • 盒子的位置按照常规流来计算(这叫做位置在常规流中)。 然后,这个盒子偏移一个相对于自己常规状态的位置。 当一个盒子B被相对位置时,B之后的盒子位置计算将无视B的偏移。 “position:relative”的行为在以下类型的元素上是未定义的:table-row-group table-header-group table-footer-group table-row table-column-group table-column table-cell table-caption
absolute
  • 盒子的位置随着top、right、bottom、left这些属性被指定。 这些属性依照盒子的含纳块来指定偏移。 绝对定位的盒子会被从常规流中取出。 这意味着它不会碰到邻近同级盒子的布局。 而且,尽管绝对定位的盒子也拥有margin属性,但是它不会与任何其它margin合并。
fixed
  • 盒子按照absolute模式来计算,但是在此之外,盒子是根据一些参考被固定的。 正如absolute模式一样,盒子的margin也不会与任何其它margin合并。 在一下的媒体类型中,盒子将根据viewport来固定它的位置且不会随滚动条滚动:handheld projection screen tty tv 在print媒体类型上,盒子将分页被渲染。即使页面是透过一个viewport来看的,也依然根据页面盒子来固定它的位置。 在其它媒体类型上的行为是未定义的。 开发者也许希望在依赖的媒体中也定义fixed。 例如,某个开发者也许需要一个盒子留在screen中viewport的顶部,而不是在每一个打印页面的顶部。 这两个规范也许是分开的,使用@media规则,如
        @media screen {
          h1#first { position: fixed }
        }
        @media print {
          h1#first { position: static }
        }
    浏览器必须不对固定定位盒子的内容做任何分割。 注意浏览器可能使用其它方法打印出不可见的内容。 见13章的“页面盒子之外的内容”

浏览器可以对根元素使用static方式定位。

盒子的偏移:top、right、bottom、left(9.3.2)

当一个元素的position属性值不是static时候,我们可以说它是“定位元素”。 定位元素将生成定位盒子,按照下面4个属性来布局。

top
  • 可用值:长度 | 百分比 | auto | inherit
  • 初始值:auto
  • 适用于:定位元素
  • 继承的:不继承
  • 百分比:参考自含纳块的高度
  • 媒体类:所有可视化媒体
  • 计算值: 如果设置的值是长度,则返回通用格式的长度; 如果设置的值是百分比,则返回设置的值; 其它情况返回auto。

这个属性说明绝对定位盒子的顶部margin边界从盒子含纳块顶部边界向下的偏移距离。 对于相对定位的盒子,根据自己的顶部边界来做偏移(例如,在常规流中有一个盒子,给它加上定位之后它将根据这些属性来偏移自己的位置)。

right
  • 可用值:长度 | 百分比 | auto | inherit
  • 初始值:auto
  • 适用于:定位元素
  • 继承的:不继承
  • 百分比:参考自含纳块的宽度
  • 媒体类:所有可视化媒体
  • 计算值: 如果设置的值是长度,则返回通用格式的长度; 如果设置的值是百分比,则返回设置的值; 其它情况返回auto。

同top属性类似,但是这个属性指定的是盒子右边margin边界从盒子含纳块右边界向左偏移的距离。 对于相对定位的盒子,根据自己的右边界来做偏移。

bottom
  • 可用值:长度 | 百分比 | auto | inherit
  • 初始值:auto
  • 适用于:定位元素
  • 继承的:不继承
  • 百分比:参考自含纳块的高度
  • 媒体类:所有可视化媒体
  • 计算值: 如果设置的值是长度,则返回通用格式的长度; 如果设置的值是百分比,则返回设置的值; 其它情况返回auto。

同top属性类似,但是这个属性指定的是盒子下边margin边界从盒子含纳块下边界向上偏移的距离。 对于相对定位的盒子,根据自己的下边界来做偏移。

right
  • 可用值:长度 | 百分比 | auto | inherit
  • 初始值:auto
  • 适用于:定位元素
  • 继承的:不继承
  • 百分比:参考自含纳块的宽度
  • 媒体类:所有可视化媒体
  • 计算值: 如果设置的值是长度,则返回通用格式的长度; 如果设置的值是百分比,则返回设置的值; 其它情况返回auto。

同top属性类似,但是这个属性指定的是盒子左边margin边界从盒子含纳块左边界向右偏移的距离。 对于相对定位的盒子,根据自己的左边界来做偏移。

这些属性的4个可用值分别有以下含义:

长度
  • 从参考边界偏移一个固定的距离,允许负值。
百分比
  • 偏移一个含纳块的宽度(对left或right)或高度(对top或bottom),允许负值。
auto
  • 对于非替换型元素,这个值的影响取决于auto相关的属性。具体参考以下章节:9.6 10.6.4 10.3.7(这些以后翻译了再加上超链接) 对于替换型的元素,这个值的影响只取决于替换内容的固有尺寸。具体参考以下章节:10.6.5 10.3.8 (这些以后翻译了再加上超链接)
网名:
3.80.55.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^