Home > Developer > Web Develop
Position has the following five values:
1. Do not use any value:
Code 1-1 is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">Figure 1-1
2. static: default value. If no position is found, the top, bottom, left, right, or z-index statements are ignored and arranged according to the normal document stream.
Code 2-1 is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Figure 2-1Summary:
① Comparison Between Figure 1-1 and figure 2-1 shows that there is no difference between the two. This shows that static is the default value of position;
② In the above Code, the left and top attributes are set in the son1 div style. However, as shown in figure 2, the settings of these attributes do not play a proper role, this confirms that when position is static, the top, bottom, left, right, or z-index statements are ignored.
3. relative: the word itself refers to "correlation and relative". From this word, we can see the function of this value, but here we need to figure out the object to which it is offset.
Code 3-1 is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Figure 3-1Summary:
1. Compare the 1-1 code and the 3-1 code. Compare the 1-1 code and the 3-1 code. We can conclude that son1 is offset from its original position;
② Which attributes can be used to set the son1 offset position: top, right, bottom, left;
③ Does son1 and son2 belong to the same level? Is son2 offset after son1? Son2 is not offset, and it is still in the original position. Actually, ① can answer this question. It can be understood as follows: if the position value is not set, the position of son1 is arranged according to the normal Document Stream. If the value of son1 position attribute is set to relative, the position of son1 is shifted according to the value of top, right, bottom, and left, this offset is relative to its original position (relative's "relative" meaning is also reflected in this );
④ What will happen if the position value is added to son2 as relative and left and other attributes are added? ① You can answer this question: the relative offset will be performed based on the original position of son2, or the sentence -- here the "relative" is compared with the original position;
5. hehahaha, the above three points mentioned "original location", so which part of the Offset is relative to the original location? Center? No. The relative offset is based on the upper left side of the object's margin;
4. absolute: it is nothing to hide. When I first learned this part, absolute gave me a glimpse of it. hehao. The following uses an example to give a layer-by-layer understanding of this absolute (note: to better understand the value of absolute, please "forget everything we mentioned above" First "):
Code 4-1 is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Figure 4-1Note: The position attribute is not used in code 4-1, that is, the value of the position attribute is static;
The Code 4-2 is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Figure 4-2Note: The only difference between code 4-1 and code 4-2 is that the "position: relative; left: 150px;" is added to the son1 style ;";
The Code 4-3 is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Figure 4-3Note: The only difference between code 4-2 and code 4-3 is that the attribute value of son1's style position is changed to absolute by relative;
Summary:
1. Comparing Figure 4-2 and Figure 4-3, we can easily draw a difference between relative and absolute: After the elements used by relative are moved, the original position is not occupied by other elements; when the elements used by absolute move, the original position will be occupied by other elements;
② When the elements affected by absolute are moved, they are occupied by other elements because the elements affected by absolute are out of the Document Stream and are not displayed from top to bottom, from left to right, the other element (son2) is not separated from the document stream. In this case, elements that are not separated from the document stream are located directly from the parent element (the body is a parent element relative to son2, that is to say, the document stream without the elements of the Document Stream (son2) is no longer based on the elements affected by absolute (son1) but on the parent element, so we can see this situation;
Code 4-4 is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">Figure 4-4
Note: we can see from code 4-4 that the position attribute is not used for the div whose class is parent, that is, the value of the position attribute is static;
The Code 4-5 is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Figure 4-5Note: we can see from the code 4-5 that the position attribute value of the div whose class is parent is absolute;
The Code 4-6 is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Figure 4-6Note: we can see from code 4-6 that the position attribute value of the div whose class is parent is relative;
The Code 4-7 is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Figure 4-7 Description: we can see from code 4-7 that the position attribute value of the div whose class is parent is fixed;
Summary:
① Comparison Fig 4-4, Fig 4-5, Fig 4-6 and Fig 4-7 can easily come to the conclusion that if an absolute acts on an element (for example, the above son1) parent object (or great-grandfather, as long as it is a parent-level object (for example, the class above is a parent div) sets the position attribute and the position attribute value is absolute, relative or fixed, then this sub-element (for example, the above son1) will refer to it (the sub-element) the nearest parent element whose position attribute value is absolute, relative, or fixed (for example, the div whose class is parent above) is located. Which position of the parent element can be used for positioning, the answer is the upper left corner of the parent element (always the upper left corner of the parent element). If the parent element style contains padding, refer to another blog --《Html css -- position learning terminator (2)); If the child element (such as the above son1)AllIf the position attribute value of the parent element is not absolute, relative, or fixed, the child element is located with the body as the positioning object. Figure 4-4 demonstrates this (note: for child elements alone, figure 4-4 and figure 4-3 are the same. They refer to the positioning object as the body );
② After the element position attribute is set to absolute, the element will be detached from the document stream, just as it does not belong to the parent object, and it floats, in DreamWeaver, it is called "layer", which actually means the same;
5. fixed: fixed is a special absolute. The element whose position attribute value is fixed always uses the body element as the positioning object (that is, Positioning Based on the browser window) according to the "left", "top", "right", or "bottom" attribute, even if you drag the scroll bar, the position of the element will not change (with background-attachment: fixed is similar ).
6. inherit: the element used by this attribute inherits the attribute value of the parent element position. You can ignore this attribute because it is not supported in any version of Internet Explorer (including IE8.
【Download demo resources with 0 Points]
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
