CSS Position using a detailed summary

CSS position Basic tutorial, very classic, recommend everyone collection.

1. position:static

The default positioning for all elements is: position:static, which means that the element is not positioned and appears in the document where it should be.

In general, you do not have to specify position:static unless you want to overwrite previously set positioning.

#p-1 {position:static;}

2. position:relative

If you set position:relative, you can use Top,bottom,left and right to move this element relative to where the element should appear in the document. "means that the element actually still occupies the original position in the document, but is visually moved relative to its original position in the document."

#p-1 {position:relative; top:20px; left:-40px;}

3. Position:absolute

When Position:absolute is specified, the element is detached from the document "that is no longer in position in the document" and can be positioned exactly as set top,bottom,left and right.

#p -1a {position:absolute; top:0; right:0; width:200px;}

4. Position:relative + Position:absolute

If we set relative positioning for p-1, then all elements within the p-1 will be positioned relative p-1. If you set absolute positioning for p-1a, you can move the p-1a to the top right of the p-1.

#p-1 {position:relative;} #p -1a {position:absolute; top:0; right:0; width:200px;}

5. Two column absolute positioning

You can now use relative positioning and absolute positioning to make a two-column layout.

#p-1 {position:relative;} #p -1a {position:absolute; top:0; right:0; width:200px;} #p -1b {position:absolute; top:0; left:0; width:200px;}

6. Two column absolute positioning height

One option is to set a fixed height for the element. However, this approach is not suitable for most designs because we do not know how much text will be in the element, or the exact font size to be used.

#p-1 {position:relative; height:250px;} #p -1a {position:absolute; top:0; right:0; width:200px;} #p -1b {position:absolute; top:0; left:0; width:200px;}

7. Floating

For variable height columns, absolute positioning doesn't work, and here's another scenario.

We can float an element so that it moves to the left/right, and it is text that surrounds it. This is primarily used for images, but here we use it for a complex layout task (because this is our only tool).

#p -1a {float:left; width:200px;}

8. Floating Columns

If we float an element to the left and float the second element to the left, they will push up against every other.

#p -1a {float:left; width:150px;} #p -1b {float:left; width:150px;}

9. Clear Floating Columns

After floating the element, we can clear the float so that the other elements are positioned correctly.

#p -1a {float:left; width:190px;} #p -1b {float:left; width:190px;} #p -1c {clear:both;}

Sugar Companion Tomato said: Although I have been using floating layout, but Master good position is also necessary, in fact, it is not so difficult ...

Original from classic: learn CSS positioning in Ten Steps

added:
Before the old do not understand, only by virtue of a short period of time
"Abused the experience" production needs of the effect, and then carefully studied the Hutia Xscroller, and carefully
read the document, only to know that this position attribute is actually refers to the main body to the superior position. If so, then the
is done. The default property value for

is static. You don't have to say more. The most critical is
relative (relative) and absolute (absolute).
often if we copy someone else's code, we will combine the absolute property with left and top to make the related
"suspended layer" effect. However, sometimes we need to target a container's hover effect, not the window's
. At this time, the calculation of height and width is not only troublesome, but also almost impossible to achieve the perfect effect. I did not have a
at the beginning to Weili, and later found that as long as its upper-level style attribute position set to relative.

That is, the effect of the Position property value is directly affected by the value of the Position property in its container style.
For example, the nested structure of a-B

<p id= "A" >
<p id= "B." >
</p>
</p>
When the position of a is relative, the position of B is valid for absolute. This time left:0, top:0 The
is no longer for window documents, but for this p with ID a.

This makes it easy to add some UI elements, such as a close button for a
active layer, when developing some B/s applications.