Layout of Absolutely Positioned Elements

In the following sections, these terms are used:

Shrink-to-fit

Similar to calculating the width of a table cell using the automatic table layout algorithm. In general, the user agent attempts to find the minimum element width that will contain the content and wrap to multiple lines only if wrapping cannot be avoided.

Static position

The place where an element’s edge would have been placed if its position were static.

Horizontal layout of nonreplaced absolutely positioned elements

The equation that governs the layout of these elements is:

left + margin-left + border-left-width + padding-left
+ width + padding-right + border-right-width + margin-right + right = width of
containing block

The steps used to determine layout are:

  1. If all of left, width, and right are auto, first reset any auto values for margin-left and margin-right to 0. Then, if direction is ltr, set left to the static position and apply the rule given in step 3c. Otherwise, set right to the static position and apply the rule given in step 3a.

  2. If none of left, width, and right is auto, pick the rule that applies from the following list:

    1. If both margin-left and margin-right are set to auto, solve the equation under the additional constraint that the two margins get equal values.

    2. If only one of margin-left or margin-right is set to auto, solve the equation for that value.

    3. If the values are overconstrained (none is set to auto), ignore the value for left if direction is rtl (ignore right if direction is ltr) and solve for that value.

  3. If some of left, width, and right are auto, but others are not, reset any auto values for margin-left and margin-right to 0. From the following list, pick the one rule that applies:

    1. If left and width are auto and right is not, then the width is shrink-to-fit. Solve the equation for left.

    2. If left and right are auto and width is not, then if direction is ltr, set left to the static position (otherwise, set right to the static position). Solve the equation for left (if direction is rtl) or right (if direction is ltr).

    3. If width and right are auto and left is not, then the width is shrink-to-fit. Solve the equation for right.

    4. If left is auto and width and right are not, solve the equation for left.

    5. If width is auto and left and right are not, solve the equation for width.

    6. If right is auto and left and width are not, solve the equation for right.

Vertical layout of nonreplaced absolutely positioned elements

The equation that governs the layout of these elements is:

top + margin-top + border-top-width + padding-top + height
+ padding-bottom + border-bottom-width + margin-bottom +
bottom = height of containing block

The steps used to determine layout are:

  1. If all of top, height, and bottom are auto, set top to the static position and apply the rule given in step 3c.

  2. If none of top, height, and bottom is auto, pick the one rule that applies from the following list:

    1. If both margin-top and margin-bottom are set to auto, solve the equation under the additional constraint that the two margins get equal values.

    2. If only one of margin-top or margin-bottom is set to auto, solve the equation for that value.

    3. If the values are overconstrained (none is set to auto), ignore the value for bottom and solve for that value.

  3. If some of top, height, and bottom are auto, but others are not, pick the one rule that applies from the following list:

    1. If top and height are auto and bottom is not, then the height is based on the element’s content (as it would be in the static flow). Reset any auto values for margin-top and margin-bottom to 0 and solve the equation for top.

    2. If top and bottom are auto and height is not, then set top to the static position. Reset any auto values for margin-top and margin-bottom to 0 and solve the equation for bottom.

    3. If height and bottom are auto and top is not, then the height is based on the element’s content (as it would be in the static flow). Reset any auto values for margin-top and margin-bottom to 0 and solve the equation for bottom.

    4. If top is auto and height and bottom are not, reset any auto values for margin-top and margin-bottom to 0 and solve the equation for top.

    5. If height is auto and top and bottom are not, reset any auto values for margin-top and margin-bottom to 0 and solve the equation for height.

    6. If bottom is auto and top and height are not, reset any auto values for margin-top and margin-bottom to 0 and solve the equation for bottom.

Horizontal layout of replaced absolutely positioned elements

The behaviors that go into placing and sizing replaced elements are most easily expressed as a series of rules to be taken one after the other. These rules state:

  1. If width is set to auto, the computed value of width is determined by the intrinsic width of the element’s content. Thus, the width of an image 50 pixels wide is computed to be 50px. If width is explicitly declared (that is, something such as 100px or 50%), then the width is set to that value.

  2. If left has the value auto in a left-to-right language, replace auto with the static position. In right-to-left languages, replace an auto value for right with the static position.

  3. If either left or right is still auto (in other words, it hasn’t been replaced in a previous step), replace any auto value in margin-left or margin-right with 0.

  4. If at this point both margin-left and margin-right are still defined to be auto, set them to be equal, thus centering the element in its containing block.

  5. After all that, if there is only one auto value left, change it to equal the remainder of the equation.

Vertical layout of replaced absolutely positioned elements

The behaviors that go into placing and sizing replaced elements are most easily expressed as a series of rules to be taken one after the other. These state:

  1. If height is set to auto, the computed value of height is determined by the intrinsic height of the element’s content. Thus, the height of an image 50 pixels tall is computed to be 50px. If height is explicitly declared (that is, something such as 100px or 50%), then the height is set to that value.

  2. If top has the value auto, replace the value with the replaced element’s static position.

  3. If bottom has a value of auto, replace any auto value on margin-top or margin-bottom with 0.

  4. If at this point both margin-top and margin-bottom are still defined to be auto, set them to be equal, thus centering the element in its containing block.

  5. After all that, if there is only one auto value left, change it to equal the remainder of the equation.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.223.20.57