An explanation of the influence of CSS absolute positioning on element width

I. Source of the problem

When you write your own carousel diagram, the previous picture slides and then appears blank until the previous picture is all slid out and the second picture appears. Just beginning to appear problems to search online found that some say timer animation may cause this situation, so I in the code debugging commented out the timer, so that the picture only walk one step to stop, found behind or there is blank, so determine not the problem of the timer. So I looked at the box model, found that the container width of the package img P#main is not my ideal six picture width of the sum, originally I did not explicitly set the width of this container p#main. But the problem comes, not explicitly set the container width, you may be sensitive to think that the width of the container should not be filled with its content to adapt it? According to the aforementioned phenomenon, the answer is naturally negative, and it can be said that not all cases are so, because the actual positioning of the container width is also affected. The relationship between the size and placement of an absolutely positioned element is discussed below.

Second, contain the block

First, let's review the basic concepts of the inclusion block (positioning context):

1. The initial containment block (the containing block of the root element) is determined by the user agent.

2. Floating elements contain blocks defined as the nearest block-level ancestor element.

3. Relative positioning or static positioning element contains a block consisting of the nearest block-level box, table cell, or inline block-box ancestor element (any type) of content boundary.

4. An absolutely positioned element containing a block set to the nearest anchor is not static for the ancestor element (any type) of the bounding rectangle (for the block-level parent element) or the content boundary (for the parent element within the row).

Three, width and offset

In general, the size and position of an element depends on its containing block. Positioning is the offset of the element's margin boundary relative to its containing block's corresponding edge (the inner boundary and border adjacent to the bounding rectangle), which affects everything (margin, border, padding, content) of the element moves. Therefore, for a positioning element there is the following equation (the calculation is based on this formula):

left+margin-left+border-left-width+padding-left+width+padding-right+border-right-width+margin-right+right= Width of the containing block (type 1-1)

Thus, when the width and height of the element are undefined, the value size is affected by the positioning. For positioning elements, it is important to determine whether the width height should be set as appropriate. Consider the following conditions for determining how much width height each is:

1. If the offset attribute top,left,bottom,right is determined, and the margin, padding, and border are not set, whether the width height is explicitly set, the value is determined by the offset property, and if the margin or padding (auto is counted) is set, the border The height width is its explicit setting value, which is still determined by the offset property if it is not explicitly set to a wide height.

2. For non-replacement element horizontal axis behavior:

1) If the left,width,right are auto, and no internal and external margins are set, then the left side of the calculated element is in its static position (read from left to right), width "properly retracted", according to the above equation right for the remaining horizontal distance;

2) When all values in the equation are fixed values, if the element is "over-constrained" then right will be reset according to the above formula;

3) When the above equation has only one attribute value of auto, the element is "over constrained" and resets the attribute value to satisfy the equation;

4) Vertical axis rules are similar, but note that only top can take a static position, bottom cannot.

3. For the replacement element (note that there is no "proper retraction" concept, since the replacement element has an intrinsic width):

1) First see whether its width (height) is explicitly declared, the value is explicitly declared, otherwise the actual size of the element content (width height) is determined;

2) again see Left,top if Auto is replaced by static position;

3) Look again if the left and bottom value if still auto, then the margin of auto 0, if not set 0 is equal, up and down equal;

4) After this, if only one auto value is left, it is similar to the non-replacement element and resets the auto value according to the equation.

5) When the element is "over-constrained", as with non-replacement elements, the user agent ignores right (read from left to right) and bottom.

The above is the analysis of the influence factors of the width height of an absolutely positioned element, when you find that the effect of the interface display is inconsistent with what you expected, you can consider analyzing from above to see if you need to re-determine the value of the width height of the element, or the value of the other attributes above.

Four or one common case studies

Now let's combine the actual example analysis of the width height problem I encountered in the project. The hypothetical scenario discussed here is that the outermost p#rel with a wide height set is relative positioning, and its sub-p#abs only sets left to a fixed value without setting the width (without an internal and external margin border), and P#abs contains different types of elements inside.

1. First of all, we discuss the case of the block-level element in the inner layer, the code is below:

<p id= "Rel1" >    <p id= "ABS1" >        <p id= "Box1" ></p>        <p id= "Box2" ></p>    </p></p>

*{margin:0;padding:0} #rel1 {position:relative;width:120px;height:50px;background-color:yellow;} #abs1 {position:absolute;top:0;left: -15px} #box1 {width:50px;height:50px;background-color:red} #box2 {width:50px; Height:50px;background-color:blue}

As the code shows, we set the absolute positioning element's margin,padding to 0, and no border, the above formula 1-1 is simplified to:

Absolute positioning element P#abs Left+width+right = width with block P#rel

Since the left of the absolute positioning element is fixed, and no width and right are set, the latter two are the initial values auto, according to the horizontal behavior of the non-replacement axis 1), it is known that the width is properly retracted, that is, the absolute positioning elements of the sub-elements of the content is exactly set, and then automatically calculate the value of right , so that the sum of the three attributes is exactly equal to the width 120px of the containing block P#rel absolute positioning. Therefore, the value of the width of an absolutely positioned element p#abs is determined by its content, and in two cases (tested by changing the width of the sub-P#box1 by code), the width of an absolutely positioned element is always equal to the largest width in the child p. and is not affected by the left value, because the value of right is automatically adjusted regardless of the left value, so that the value of width is not affected.

　　　　　　　 　　

2. Take a look at the most inner package is the case of replacing the elements in the line, the code is as follows:

<p id= "Rel2" >    <p id= "ABS2" >                    </p></p>

*{margin:0;padding:0} #rel2 {position:relative;width:120px;height:50px;background-color:yellow;} #abs2 {position:absolute;top:0;} Img{float:left} #img1 {width:50px;height:50px} #img2 {width:50px;height:50px}

Where the left of an absolutely positioned element is set to a fixed value, and width is based on the principle of "properly retracted", its maximum value should be the sum of the width of the child element in the row, the minimum value should be the width of the largest of the children, and the value of right is a bit more complicated, because by default, Block-level elements are arranged vertically and the inline elements are one next to the other (the middle gap can be cleared with: Float:left) from left to right, with no line breaks in between. So when an inline element is placed within an absolutely positioned block-level element as the content width of the element is too wide, the content is stretched until it contains the right edge of the block content area (read from left to right), because the element within its elements is characteristic, so that when a child element (that is, the content of an absolute element) is restricted, the value Formula 1-1 is simplified as follows:

Absolute positioning element P#abs Left+width = width with block P#rel

Of course, this should be in the left set value within a certain range of the premise (because the width is not set, is auto), then how to determine this range? When the width of an absolutely positioned element is exactly equal to its minimum and maximum value, the above formula is used to find the left range set between (contains the block width-maximum absolute positioning element width) ~ (contains the block width-minimum absolute positioning element width), The width of an absolutely positioned element is affected by the left value and can be obtained by the formula above to find the width of an absolutely positioned element when left is a specific value.

When the left value is set outside the above mentioned range, the absolute positioning element width has reached the extremum, it will no longer be affected by the left change, right is no longer 0, and will automatically calculate to meet the following formula:

Absolute positioning element P#abs Left+width+right = width with block P#rel

　　　　

3. In summary, in the case of assumptions:

1) If an absolutely positioned element wraps a block-level element, its width value is always equal to the value of the largest person in the child element.

2) If the element is absolutely positioned in the line element, its width value is the sum of the width of the child element, the minimum is the value of the maximum child element width, and a left interval that affects the width value is obtained, and the width of the width of the containing block is-left by the value.

V. Summary

Turn around to say so much, in fact, is a truth, if you are worried about the width of the absolute positioning element problem, it is best to explicitly set a width fixed value, because according to Rule 1, in the absence of four offset properties are all set, the explicit width value is useful ~ However in the actual environment, Setting the width height is not necessarily necessary for positioning elements, so understanding the factors affecting the height of the width will be more helpful for the problems encountered in the display of the effect. This is my first time to write science and technology blog, first I would like to review my elegant siege lion's boyfriend to extend the most sincere thanks, while thanking O ' Reilly series "CSS authoritative guide Third Edition" of the author and related staff, this article a lot of content is reference to the book and write their own understanding, the initial issue if there is a problem , but also please criticize correct, thank you very much ~