blink渲染知识5 - absulte/fixed and relative positioning

Posted by DaveHyatt onTuesday, August 14th, 2007 at 1:32 pm

The position property in CSS can be used to position anobject relative to a specific containing block. It has fourvalues: ‘static’, ‘absolute’, ‘fixed’ and ‘relative’.Static positioning is the default and means that the object is justpositioned using the normal rules of block and line layout.

RelativePositioning

Relative positioning is exactly like static positioning exceptthat the CSS left, top, right and bottomproperties can be used to apply a translation to the object. TheisRelPositioned method can be used to ask if a rendereris using relative positioning.

bool isRelPositioned() const

The translation offset that will be applied can be obtained usingthe following methods:

int relativePositionOffsetX() const;

int relativePositionOffsetY()
const;

Relative positioning is literally nothing more than a paint-timetranslation. As far as layout is concerned, the object is at itsoriginal position. Below is an example that uses relative positioningto shift part of a line up by a few pixels. As you can see, the linelays out as though the object was at the original position.

<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>

Here is aline of text. This part isshifted
up a bit, but the rest of the line is in itsoriginal position.

Absoluteand Fixed Positioning

Fixed positioned objects are positioned relative to the viewport,i.e., the visible page area of your browser window. Absolutepositioned objects are positioned relative to the containingblock, which is the nearest enclosing ancestor block with aposition other than ‘static’. If no such block exists, then theinitial containing block (the RenderView) is used. For more detailson containing blocks, see the previous article.

The isPositioned method can be used to find out if arenderer is absolute or fixed positioned.

bool isPositioned() const

When an object is absolute/fixed positioned, it becomesblock-level. Even if the CSS display type is set to inline (orinline-block/table), the effective display type becomes block-levelonce an object is positioned. The isInline method willreturn false for positioned elements.

The RenderStyle can give both display values. Thereare times where the original display type is relevant and needed bylayout, and the following methods can be used to obtain both displaytypes.

EDisplay display() const;

EDisplay originalDisplay() const;

ThePositioned Objects List

Every block has a positioned objects list that contains all of theabsolute/fixed positioned renderers for which it is the containingblock. It is the block’s responsibility to place these positionedchildren. The following methods can be used to manipulate thepositioned objects list:

void insertPositionedObject(RenderObject*);

void
removePositionedObject(RenderObject*);

The layoutOnlyPositionedObjects method is used to layout only the positioned objects for a block. If only positionedobjects changed, then this method returns true. Thisindicates that the layout method doesn’t have to lay out any of itsnormal children and can just return early.

bool layoutOnlyPositionedObjects

The layoutPositionedObjects method takes care of theplacement of positioned objects. It takes a boolean argument thatindicates whether relayout should be forced on all of the objects.Relayout can be necessary under a variety of circumstances that willbe covered in future articles.

bool layoutPositionedObjects(bool relayoutChildren)

Coordinatesof Positioned Objects

The coordinates of positioned objects in CSS are relative to thepadding edge of the containing block. For example specifying a leftand top position of (0, 0) for an absolute positioned object willresult in the object being placed just inside the containing block’stop left border. Here is an example:

<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 theborder edge, so in the above example, the object is actually at (5,5).

When the desired coordinates are omitted from CSS, WebCore has todetermine an appropriate place for the positioned object. CSS has aset of extremely complex rules for this, which we will delve into inmore detail in future articles.

InlineRelative Positioned Containers

It is possible for a relative positioned inline to act as a“containing block” for an absolutely positioned descendant. Thisis another extremely complex edge case that warrants its own article.For now it is enough to know that such a construct is possible, andthat the code does have to deal with it.

关于定位，这里还有一篇文章讲的不错。

http://www.jb51.net/web/77495.html