The technique of positioning position in CSS

This article on the CSS commonly used 6 properties to explore, we will certainly be satisfied with this article.

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;

<span style= "White-space:pre" >    </span> #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:

<span style= "White-space:pre" >    </span>    #p -1a {                  float:left;                  width:190px;                 }                 #p -1b {                  float:left;                  width:190px;                 }                 #p -1c {                  clear:both;                 }

The above is about the CSS positioning commonly used in six attribute learning, I hope that everyone's learning has helped.