Analysis on CSS + DIV Positioning

When CSS + DIV is used for layout, the four attribute values of position, relative, absolute, static, and fixed, are not very clear, so that the results are often depressing. I learned something about it today. Here is a summary:

Let's take a look at the definition of each attribute value:

1. static: default value. The element is not located and appears in the normal stream (ignore the top, bottom, left, right, or z-index declarations ).

2. relative: Generate relative positioning elements and locate them by setting top, bottom, left, and right. You can perform hierarchical classification using z-index.

3. absolute: generates absolute positioning elements, which are located relative to the first parent element other than static positioning. The positions of elements are specified by the "left", "top", "right", and "bottom" attributes. You can perform hierarchical classification using z-index.

4. fixed: generate the absolute positioning element, which is located relative to the browser window. The positions of elements are specified by the "left", "top", "right", and "bottom" attributes. You can perform hierarchical classification using z-index.

Static and fixed positioning methods are easy to understand, so we will not analyze them here. The following analyzes the relative and absolute of applications:

1. relative. The element positioned as relative is removed from the normal text stream, but its position in the text stream still exists. 1:

Figure 1

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

2. absolute. The layer positioned as absolute is out of the normal text stream, but the difference with relative is that it does not exist in the normal stream. 2:

Figure 2

As you can see, after the yellow background layer is positioned as absolute, the gray background layer is automatically added.

• 2 pages in total:
• Previous Page
• 1
• 2
• Next Page