CSS position-based static relative absolute float usage

1. position: static

The default value of the position attribute of an element is static. That is, the element appears in the regular position of the document and is not located again.

Generally, this attribute value can be left unspecified unless it overwrites the previous definition.

The code is as follows:	Copy code
# Div-1 { Position: static; }

2. position: relative

With position: relative set, you can offset the regular position of the document by combining the top, bottom, left, and right attributes.

For example, move the div-1 down 20 pixels, move 40 pixels to the left:

The code is as follows:	Copy code
# Div-1 { Position: relative; Top: 20px; Left:-40px; }

Note that the div-1 is not moved before the place, now a little more space, followed by the div-1 element (div-after) is not moved, in fact even if the div-1 is moved, it still? Poor? Jia Hui Yu? /P>

It seems that position: relative is not very useful (I think it is useful), but it is particularly important in the following content.

3. position: absolute

If position: absolute is set, that is, absolute positioning, the element can be placed in any position in the document.

For example, place the div-1a in the upper right corner:

The code is as follows:	Copy code
# Div-1a { Position: absolute; Top: 0; Right: 0; Width: 200px; }

Note! Since the div-1a is removed, other element positions in the page have also changed: div-1b, div-1c, div-after are all moved up.

Div-1a is placed in the upper right corner of the page. It is very convenient to directly locate elements, but it does not work very well.

This? What really needs to be done is to position the div-1a relative to the div-1, which will talk about the relative attribute again.

Note

IE browser Bug: if the relative width (such as "width: 50%") is set, the width is based on the parent element rather than itself.

4. position: relative + position: absolute

Set the location of the div-1 to relative, and the positioning of elements in the div-1 will be relative to the div-1. Now you can set the position of the div-1a to absolute to place it in the upper right corner of the div-1:

The code is as follows:	Copy code
# Div-1 { Position: relative; } # Div-1a { Position: absolute; Top: 0; Right: 0; Width: 200px; }

5. Absolute positioning of the two columns

Next, use relative and absolute to implement absolute positioning of the two columns:

The code is as follows:	Copy code
# Div-1 { Position: relative; } # Div-1a { Position: absolute; Top: 0; Right: 0; Width: 200px; } # Div-1b { Position: absolute; Top: 0; Left: 0; Width: 200px; }

The advantage of absolute positioning is that you do not need to consider the position of the element in html, you can place any element, here deliberately put the div-1b before the div-1a;

Note that an element is covered by an absolutely positioned element. How can this problem be solved?

6. two column absolute height

One way is to set a fixed height.

However, it is not a perfect strategy, because the height and font size of elements are not always determined.

The code is as follows:	Copy code
# Div-1 { Position: relative; Height: 250px; } # Div-1a { Position: absolute; Top: 0; Right: 0; Width: 200px; } # Div-1b { Position: absolute; Top: 0; Left: 0; Width: 200px; }

7. float (floating)

For situations with a high degree of uncertainty, it is absolutely difficult to locate and use, so I think of another solution.

You can use the float left or right to enclose text, especially the surrounding image? Miscellaneous? Why? Only in this way ).

The code is as follows:	Copy code
# Div-1a { Float: left; Width: 200px; }

8. Multi-column floating

The two columns are moved to the left, so that the two columns can be tied together.

The code is as follows:	Copy code
# Div-1a { Float: left; Width: 150px; } # Div-1b { Float: left; Width: 150px; }

9. Clear floating after multiple floating columns

After floating the element, use "clear" to clear the floating, and then pull down the subsequent content.

The code is as follows:	Copy code
# Div-1a { Float: left; Width: Pixel px; } # Div-1b { Float: left; Width: Pixel px; } # Div-1c { Clear: both; }