WebCore Rendering 4 - 绝对/固定定位和相对定位

CSS里的position属性可以用来对一个对象相对于某个容器块（containing block）进行相对定位。该属性有4个值：'static'（静态）, 'absolute'（绝对）, 'fixed'（固定）以及'relative'（相对）。静态定位是默认值，表示使用正常的块和内联排版规则来对对象定位。

相对定位（Relative Positioning）

相对定位与静态定位非常相似，只是相对定位还可以通过CSS属性left, top, right以及bottom来对对象的位置进行移动。isRelPositioned方法可以用来判断一个渲染树节点是否是相对定位。

bool isRelPositioned() const;

移动偏移量可以通过下面的方法来获取：

int relativePositionOffsetX() const;

int relativePositionOffsetY() const;

相对定位只是在将网页内容“画”在屏幕上时将对象进行移动。到目前为止，排版所关心的只是对象的原始位置。下面是一个使用相对定位将一行文字的某一部分向上移动几个像素的例子。从该例子可以看出，移动的那部分从其原来的位置向上移动的。

<div style="border:5px solid black; padding:20px; width:300px">

Here is a line of text.

<span style="position:relative;top:-10px; background-color: #eeeeee">

This part is shifted<br> up a bit,

</span>

but the rest of the line is in its original position.

</div>

绝对定位和固定定位（Absolute and Fixed Positioning）

固定定位是相对于可视区域（即浏览器窗口的可见页面区域）进行定位的。绝对定位是相对于容器块（最近的position属性不是static的祖先块）进行定位的。如果没有这样的块存在，就相对于初始容器块（the RenderView）。更多关于容器块的信息，可查看前一篇文章。

isPositioned方法可以用于判断一个渲染树节点是否是绝对定位或固定定位。

bool isPositioned() const

当一个对象是绝对/固定定位，它会变成块级（block-level）元素。即使CSS的display属性设置为inline（或inline-block/table），当对象被定位完后，有效的display属性值会变为块级的。对于定位后的元素，isInline方法将会返回false。

RenderStyle可以给出全部的display属性值。有时，原始的display属性值对于排版是有用的，下面的方法可以用来获取全部的display属性值。

EDisplay display() const;

EDisplay originaljDisplay() const;

定位对象列表（The Positioned Objects List）

每一个块都有一个定位对象列表，该列表包含了子对象的容器块是自身的全部的绝对/固定定位的渲染树节点。维护这个定位对象列表是块的职责。下面的方法可以用来操作定位对象列表：

void insertPositionedObject(RenderObject*);

void removePositionedObject(RenderObject*);

layoutOnlyPositionedObjects方法用来对该块的定位对象进行排版。如果只有定位对象改变，该方法会返回true。这意味着排版方法不需要对它的正常孩子进行排版，因此，可以提前结束排版过程。

bool layoutOnlyJPositionedObjects

layoutOnlyPositionedObjects方法对定位对象进行定位。它使用一个布尔参数来表示是否需要对全部的对象强制进行重排版。重排版在一些情况下是必须的，这些内容将会在将来文章里讲述。

bool layoutOnlyJPositionedObjects(bool relayoutChildren)

定位对象的坐标（Coordinates of Positioned Objects）

在CSS里，定位对象的坐标是相对于容器块的填充边缘的。例如，为一个绝对定位对象指定了left和top属性为（0, 0），那么，这个对象会被放置于容器块左上角边框内。如下：

<div style="position:relative;border:5px solid black;width:300px;height:300px;">

<div style="position:absolute;width:200px;height:200px;background-color:purple"></div>

</div>

在WebCore里，坐标定位总是相对于边框边缘的，所以，对于上面的例子来说，对象实际上被定位于（5, 5）。

当所希望的坐标与CSS不一致时，WebCore不得不为定位对象决定一个合适的位置。为此，CSS有一套非常复杂的规则，我们会在将来的文章中慢慢讲述。

内联相对定位容器（Inline Relative Positioned Containers）

有可能存在这种情况：一个相对定位的内联元素是其一个绝对定位的子元素的容器块。这又是一种非常复杂的足以用一篇独立的文章来讲述的特殊情况。对现在来说，我们知道这个情况是可能存在的，以及有相应的代码来解决这个情况就可以了。

原文地址：http://www.webkit.org/blog/117/webcore-rendering-iv-absolutefixed-and-relative-positioning/