A case study of the absolute Father Phase of HTML son
This article mainly explains "HTML child absolute parent phase example analysis", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let Xiaobian take you to learn "HTML child absolute parent phase example analysis"!
1. The son must be the father
1. Use only relative positioning to accurately locate the position of the image.
Title *{ margin:0; padding:0; } ul{ list-style:none; width:800px; height:50px; background-color: red; margin:0 auto; } ul li{ float:left; width:100px; height: 50px; text-align:center; background-color: yellow; line-height: 50px; } ul li:nth-of-type(4){ /* Review similar tags here Select the number to set its style */ background-color: blue; } ul li img{ position:relative; left: -30px; top: -14px; width: 20px; height: 16px; /* Here you can write a rough number first, and then use Google Developer Location to scroll the data adjustment */ } auction finance Beauty salon Jingdong supermarket global purchase
flash purchase group purchase auction
Disadvantages of this approach: Although relative positioning is used to adjust the data to achieve the effect of positioning the image, since the relative positioning is adjusted on the basis of the standard stream, the original image position (that is, the area behind the global purchase) is still occupied.
2. The following tests are conducted using only absolute positioning.
ul li img{ position:absolute; left: 900px; top: 1px; width: 20px; height: 16px; }
? Disadvantages of this method: The last serial said that absolute positioning will be positioned on the first screen, so when changing the size of the page, it will cause deformation and positioning. That doesn't make sense.
3. Therefore, it is most reasonable to use absolute positioning and relative positioning at the same time
ul li:nth-of-type(4){ /* Review similar tags here Select the number to set its style */ background-color: blue; position:relative; } ul li img{ /* Introduce a method: Child absolute parent phase, that is, child elements use absolute positioning, parent elements use relative positioning */ position:absolute; left: 41px; top: 1px; width: 20px; height: 16px; } At this point, I believe that everyone has a deeper understanding of "HTML child absolute parent phase instance analysis", may wish to actually operate it! Here is the website, more related content can enter the relevant channels for inquiry, pay attention to us, continue to learn!
