CSS position positioning properties in use some of the focus

1.position:static

The static property is the default value of position, which means that when an element does not have a position property set for it, its default value is static.

2.position:absolute
This is a position property value that will often be used. If absolute is set for an element, the element is detached from the original document flow. Some of the images say, for example, that a element is defined as Position:absolute, then this element does not have a position on the other elements of the page, but rather overrides the floating state above the entire page. The location of other elements in the page, changes in size, etc., does not affect the position of a element, which is equivalent to an outsider.

3.position:relative
Relative is the most useful method of defining. Sets the relative property to indicate that the element has changed relative to its original position. For example, we define a B element and set it to the following CSS style:

#b {         position:relative;         width:100px;         height:100px;         top:100px;     }

The section code defines the B element, which is positioned at a distance of 100px relative to the position where the position attribute is not defined. The Relative property value is defined as this positioning mode.

4.position:fixed
Fixed positioning is not much, but it is very suitable for fixed-mode parts, such as the top menu. When the fixed property is defined, the position of the element does not change with any behavior.

5.relative+position
Using these two positions simultaneously is a very common technique, and a novice may encounter a lot of trouble here. In general, if an element is absolutely positioned, its reference is to set relative positioning from its nearest element, if there is a setting that will be positioned near its nearest element, and if there is no relative positioning element for its ancestor, the HTML will be found. For example, the following code uses a combination of both to achieve a two-column layout;

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

The inner two sub-p will be absolutely positioned according to the element whose outer position is relative.

6.clear:both Clear Float
Sometimes the position collapses, that is, the child element is in the parent element, but the parent element's size does not "open up" with the child element's size, resulting in the collapse effect of the parent element. This bug occurs because the child element sets the float property, which causes the parent element to collapse. To resolve this bug, you need to set the clear float for the parent element. The sample code is as follows:

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