CSS in-depth research: position explanation

Position has four attribute values:

1. Relative
2. Absolute
3. Fixed
4. Static

The following describes the four attributes.

1. Relative

Relative attribute, relative positioning, we need to find out which object it is relative to for offset. The answer is its location. The relative offset is based on the upper left side of the object's margin. However, this product is more powerful than margin. IfSeparateWhen using this property, you can generally regard this product as an all-powerful margin because it can work during display: inline, at this point, the margin of the margin value does not work. Of course, some applications with negative margin values cannot use this attribute. For example, the negative value of the sub-level margin can reduce the width of the display: inline-block parent level, so as to implement adaptive buttons similar to rounded corners.

 

 

 

At this time, relative cannot replace margin. Therefore, it is generally more powerful when used separately. Of course, this product has other combinations of applications.

2. Absolute

This attribute is a powerful devil. When the attribute of the element is set to absolute, this element is floating. DisconnectedDocument StreamNima, this is another product. When I see the "Document Stream", I guess most people don't quite understand this strange thing. So next, let's take a look and explain the Document Stream, please skip this section.

Document Stream (normal stream ):

Divides the form from top to bottom into one row, and emits elements from left to right in each row, that is, the document stream.

In three cases, elements are separated from the document stream, namely float left or right, absolute position: absolute, and fixed position: fixed ). Here, the floating caused by the separation of the Document Stream and positioning caused by performance is different. The difference is that the reader needs to code the demo on his own.

When the position of an element is set to absolute, how does the element offset? There are two scenarios:

(1) When the element's parent level (either grandpa or Grandpa) sets the position attribute and the position attribute value is absolute or relative, the element is located according to the parent level.
Although the object is fixed, you need to think about it in some places. If the parent level is set
For attributes such as margin, border, and padding, where can this positioning point start? The answer is from padding.

(2) If the parent level of an element does not have an object with the position attribute value absolute or relative, the object will be positioned with the body, which is easier to understand.

3. Fixed

Fixed is offset relative to the visible area. No matter whether you drag the browser's scroll bar or not, no matter who its parent level is, it will not bird you, if you do not understand, please code the demo by yourself. Oh, one more thing: IE6 is not supported. If you want to implement IE6 fixed in advance, you can use CSS expressions to solve this problem.

4. Static

The default value of position. When the position attribute is not set, it is arranged according to the normal document stream.

Last nonsense: originalityArticleIf there is any error, please correct it. If it is helpful to you, please click [Top].

Position has four attribute values:

1. Relative
2. Absolute
3. Fixed
4. Static

The following describes the four attributes.

1. Relative

Relative attribute, relative positioning, we need to find out which object it is relative to for offset. The answer is its location. The relative offset is based on the upper left side of the object's margin. However, this product is more powerful than margin. IfSeparateWhen using this property, you can generally regard this product as an all-powerful margin because it can work during display: inline, at this point, the margin of the margin value does not work. Of course, some applications with negative margin values cannot use this attribute. For example, the negative value of the sub-level margin can reduce the width of the display: inline-block parent level, so as to implement adaptive buttons similar to rounded corners.

 

 

 

At this time, relative cannot replace margin. Therefore, it is generally more powerful when used separately. Of course, this product has other combinations of applications.

2. Absolute

This attribute is a powerful devil. When the attribute of the element is set to absolute, this element is floating. DisconnectedDocument StreamNima, this is another product. When I see the "Document Stream", I guess most people don't quite understand this strange thing. So next, let's take a look and explain the Document Stream, please skip this section.

Document Stream (normal stream ):

Divides the form from top to bottom into one row, and emits elements from left to right in each row, that is, the document stream.

In three cases, elements are separated from the document stream, namely float left or right, absolute position: absolute, and fixed position: fixed ). Here, the floating caused by the separation of the Document Stream and positioning caused by performance is different. The difference is that the reader needs to code the demo on his own.

When the position of an element is set to absolute, how does the element offset? There are two scenarios:

(1) When the element's parent level (either grandpa or Grandpa) sets the position attribute and the position attribute value is absolute or relative, the element is located according to the parent level.
Although the object is fixed, you need to think about it in some places. If the parent level is set
For attributes such as margin, border, and padding, where can this positioning point start? The answer is from padding.

(2) If the parent level of an element does not have an object with the position attribute value absolute or relative, the object will be positioned with the body, which is easier to understand.

3. Fixed

Fixed is offset relative to the visible area. No matter whether you drag the browser's scroll bar or not, no matter who its parent level is, it will not bird you, if you do not understand, please code the demo by yourself. Oh, one more thing: IE6 is not supported. If you want to implement IE6 fixed in advance, you can use CSS expressions to solve this problem.

4. Static

The default value of position. When the position attribute is not set, it is arranged according to the normal document stream.

Finally, it's nonsense: original articles. If you have any mistakes, please correct them. If you have any help, please click [Top].