The position property in CSS can be used to position an object relative to a specificcontaining block. It has four values: ’static’, ‘absolute’, ‘fixed’ and ‘relative’. Static positioning is the default and means that the object is just positioned using the normal rules of block and line layout.
CSS的position属性用来决定一个对象相对于containing block的位置，该属性具有四种值，分别是：static、absolute、fixed和relative，static属性是缺省属性，意味着采用block和linelayout的一般规则来确定对象的位置。
Relative Positioning
Relative positioning is exactly like static positioning except that the CSS left, top, right and bottom properties can be used to apply a translation to the object. TheisRelPositioned method can be used to ask if a renderer is using relative positioning.
relative positioning和static positioning相似，除了CSS中的left、top、right、bottom属性都是通过翻译后的值。//译者：不太决定我理解的是否准确，原文如下（Relative positioning is exactly like static positioning except that the CSSleft,top,right andbottom properties can be used to apply a translation to the object.），isRelPositioned方法可以用来确定一个renderer是否使用一个relative positioning。
bool isRelPositioned() const
The translation offset that will be applied can be obtained using the following methods:
翻译过程被应用的offset值可以通过下面的两个方法来的到：
int relativePositionOffsetX() const;
int relativePositionOffsetY() const;
Relative positioning is literally nothing more than a paint-time translation. As far as layout is concerned, the object is at its original position. Below is an example that uses relative positioning to shift part of a line up by a few pixels. As you can see, the line lays out as though the object was at the original position.
从字面上说，relative positioning就是一个paint-time translation。一旦layout被连接后，对象在他原始位置上。下面的例子使用relative positioning使一部分line偏移一些像素，正如你所看到的，line lays out就像对象在原始的位置。//下面的例子看明白了，但作者的意思不太理解。
<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>
up a bit, but the rest of the line is in its original position.
Absolute and Fixed Positioning
Fixed positioned objects are positioned relative to the viewport, i.e., the visible page area of your browser window. Absolute positioned objects are positioned relative to thecontaining block, which is the nearest enclosing ancestor block with a position other than ’static’. If no such block exists, then the initial containing block (the RenderView) is used. For more details on containing blocks, see the previous article.
fixed对象的定位是相对于viewport的，viewport，即：你的浏览器的窗口可见部分。absolute对象的定位是相对于containing block的，containing block是最近的不是static position属性的祖先，如果没有这样的祖先存在，那么就使用inital containing block（RenderView）。关于containing block的更多的细节在前面的文章有描述。
The isPositioned method can be used to find out if a renderer is absolute or fixed positioned.
isPositioned方法可以用来判定是否renderer使用了absolute 或 fixed 属性。
bool isPositioned() const
When an object is absolute/fixed positioned, it becomes block-level. Even if the CSS display type is set to inline (or inline-block/table), the effective display type becomes block-level once an object is positioned. TheisInline method will return false for positioned elements.
如果一个对象是absolute/fixed来定位，这个对象将是block-level的，即便CSS显示类型被设置为inline（或者inline-block/table)，当这个对象被定为时，有效的显示类型都将是blcok-level。 isInline方法对于positioned elements将返回false。
The RenderStyle can give both display values. There are times where the original display type is relevant and needed by layout, and the following methods can be used to obtain both display types.
RenderStyle可以给出两个显示值，There are times where the original display type is relevant and needed by layout,//译者：不理解，不知道如何译好，下面的方法可以用来获取两种显示类型。
EDisplay display() const;
EDisplay originalDisplay() const;
The Positioned Objects List
Every block has a positioned objects list that contains all of the absolute/fixed positioned renderers for which it is the containing block. It is the block’s responsibility to place these positioned children. The following methods can be used to manipulate the positioned objects list:
每一个block都有一个positioned objects list，这个list包含全部的该对象的containing block的具有absolute/fixed positioned的renderers。block负责其孩子的定位，下面的方法能够用来操作positioned object list。
void insertPositionedObject(RenderObject*);
void removePositionedObject(RenderObject*);
The layoutOnlyPositionedObjects method is used to lay out only the positioned objects for a block. If only positioned objects changed, then this method returnstrue. This indicates that the layout method doesn’t have to lay out any of its normal children and can just return early.
方法layoutOnlyPositionedObjects被用来layout那些positioned block 对象，如果只有positioned 对象发生了改变，那么这个方法返回true。这表明：layout方法不需要layout任何一般孩子，可以尽早返回。
bool layoutOnlyPositionedObjects
The layoutPositionedObjects method takes care of the placement of positioned objects. It takes a boolean argument that indicates whether relayout should be forced on all of the objects. Relayout can be necessary under a variety of circumstances that will be covered in future articles.
layoutPositionedObject方法关注positioned对象的位置，它具有一个boolean参数，表明是否relayout应该应用于全部对象，在很多情况下，relayout是需要的，这个话题将在未来的文章中进行介绍。
bool layoutPositionedObjects(bool relayoutChildren)
Coordinates of Positioned Objects
The coordinates of positioned objects in CSS are relative to the padding edge of the containing block. For example specifying a left and top position of (0, 0) for an absolute positioned object will result in the object being placed just inside the containing block’s top left border. Here is an example:
CSS positioned对象的坐标是相对于containing block的padding边缘的。举例来说，指定一个absolute positioned对象的left和top是（0,0），结果是这个对象被定位在其containing block的top left border。下面是一个具体的例子：
<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>
In WebCore, coordinate positions are always relative to the border edge, so in the above example, the object is actually at (5, 5).
在WebCore中，坐标位置总是相对于border边缘，因此在上面的例子中，对象的实际坐标是（5,5）
When the desired coordinates are omitted from CSS, WebCore has to determine an appropriate place for the positioned object. CSS has a set of extremely complex rules for this, which we will delve into in more detail in future articles.
当期望的坐标被从CSS中省略了，WebCore不得不为positioned对象选择一个合适的地方定位。CSS有一套非常复杂的规则来解决这个问题，在以后的文章中会讨论这个问题。
Inline Relative Positioned Containers
It is possible for a relative positioned inline to act as a “containing block” for an absolutely positioned descendant. This is another extremely complex edge case that warrants its own article. For now it is enough to know that such a construct is possible, and that the code does have to deal with it.
一个relative positioned inline也是可能被其absolutely positioned 后代作为containing block的，这是另一个极端复杂的边缘情况，可以在单独的文章中讨论，目前只知道这种结构是可能的就足够了，代码也必须处理这种情况。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
