CSS DIV positioning analysis (relative, absolute, static, fixed)_html/css_WEB-ITnose

CSS DIV positioning analysis (relative, absolute, static, fixed)

When using CSS DIV for layout, the four attribute values ​​​​of position: relative, absolute, static, fixed are not very divided. Clearly, it often leads to very depressing results. I did some research today and finally understood something. To summarize here:

Let’s first look at the definition of each attribute value:

1. static: default value. Without positioning, the element appears in normal flow (ignoring top, bottom, left, right or z-index declarations).

2. Relative: Generate a relatively positioned element and position it relative to its normal position through the settings of top, bottom, left, and right. Hierarchical classification can be done through z-index.

3. Absolute: Generate an absolutely positioned element and position it relative to the first parent element other than static positioning. The position of the element is specified via the "left", "top", "right" and "bottom" attributes. Hierarchical classification can be done through z-index.

4. fixed: Generate absolutely positioned elements and position them relative to the browser window. The position of the element is specified via the "left", "top", "right" and "bottom" attributes. Hierarchical classification can be done through z-index.

The positioning methods of static and fixed are easy to understand and will not be analyzed here. The following is an analysis of the commonly used relative and absolute:

1. relative. An element positioned relative is removed from the normal text flow, but its position in the text flow still exists. As shown in Figure 1:

Figure 1

The layer with the yellow background is positioned relative, and the red border area is its position in the normal flow. After positioning it through top and left, you can see from the position of the gray background layer that its normal position still exists.

2. Absolute. A layer positioned as absolute is separated from the normal text flow, but the difference from relative is that its position in the normal flow no longer exists. As shown in Figure 2:

Figure 2

As you can see, after positioning the yellow background layer as absolute, the gray background layer is automatically filled in.

3. The main difference between relative and absolute:

First of all, it is whether the position in the normal flow exists or not as mentioned above.

Secondly, the relative positioned layer is always relative to its nearest parent element, no matter how its parent element is positioned. As shown in Figure 3:

Figure 3

In the figure, the red background layer is relative positioned, and the green background layer of its direct parent element is static positioned by default. The position of the red background layer is the top and left 20 elements relative to the green background layer. And if the red background layer is positioned as absolute, the situation is as shown in Figure 4:

Figure 4

As you can see, the red background layer still defines top:20px; left: 20px; but its relative element becomes a yellow background layer with absolute or relative positioning mode. Therefore, a layer positioned for absolute is always relative to its nearest parent layer defined as absolute or relative, and this parent layer is not necessarily its direct parent layer. If absolute or relative is not defined in its parent layer, it will be positioned relative to the body, as shown in Figure 5:

Figure 5

Except top, left, and right , bottom positioning, the definition of margin attribute value also conforms to the above rules.

This article is reproduced from:

http://www.pqshow.com/design/htmlcss/12653.html