Home > Developer > Web Develop
In the blog "html css -- position learning terminator (1)", we realized that if a absolute acts on the parent object of an element (or a great grandfather, as long as it is a parent object) if the position attribute is set and the position attribute value is absolute, relative, or fixed, the child element will be referred to as the child element) the nearest parent element whose position attribute value is absolute, relative, or fixed is located. The child element is located in the upper left corner of the parent element. People who have learned padding may think like this: in this case, if the padding style is set for the parent element, should the child element used by absolute be located from the position of the padding? Haha, Is this correct? refer to the following example:
Code 01:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Figure 01Note: The above son1 parent element does not use the padding style. At this time, the son1 positioning point is the upper left corner of the parent element;
Code 02
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Figure 02Note: The above son1 parent element adds the style padding-left and sets its value to 50px;
Conclusion: compared to figures 01 and 02, we will find that son1 is not affected by padding-left in this case. Therefore, we can determine that the parent element even if the padding style is set, the child element of absolute is located from the upper left corner of the parent element.
【Download demo resources with 0 Points]
[See another blog --Html css -- position learning terminator (1)]
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
