First, father of the child must phase
1. Use only the relative positioning of the position of the picture for accurate positioning.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin:0; padding:0; } the { 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){ / * Here to review the first of several similar label selection set its style * / background-color: blue; } ul li img{ position:relative; left: -30px; top: -14px; width: 20px; height: 16px; / * I'll let you write a ballpark figure, then use Google developer positioning data to scroll adjustment * / } </style> </head> <body> <ul> < Li > Auction Finance </ li > < Li > Beauty Hall </ li > < Li > jingdong supermarket </ Li > <li> Global buys < img src = "bear.jpg" > </li> <li>闪购</li> < Li > buy </ Li > < Li > Auction </ li > <li></li> </ul> </body> </html>
The disadvantage of this approach: You can see that although the relative positioning carried out using the data to make the picture adjustment to achieve the targeted results, but because of the relative position is adjusted on the basis of the standard flow, so the location of the original image (ie Global buys piece area behind) is still occupied with the.
2. The following only use absolute positioning to be tested.
ul li img{
position:absolute;
left: 900px;
top: 1px;
width: 20px;
height: 16px;
}
The disadvantage of this approach: When it comes to the last serial, absolute positioning will be positioned above the fold, so when the time to change the page size will cause deformation, navigate to the unreasonable.
3. Therefore, to simultaneously use absolute positioning and relative positioning is most reasonable orchestrated
ul li:nth-of-type(4){
/ * Here to review the first of several similar label selection set its style * /
background-color: blue;
position:relative;
}
ul li img{
/ * Describes a method for: a parent child absolute phase, i.e., absolute positioning child elements, the parent element using relative positioning * /
position:absolute;
left: 41px;
top: 1px;
width: 20px;
height: 16px;
}
Third, the source code:
D153_SubAbsoluteFathRelative.html
address:
https://github.com/ruigege66/HTML_learning/blob/master/D153_SubAbsoluteFathRelative.html
2.CSDN：https://blog.csdn.net/weixin_44630050
3. Park blog: https: //www.cnblogs.com/ruigege0000/
4. Welcomes the focus on micro-channel public number: Fourier transform, personal account only for technical exchanges, backstage reply "gifts" big data acquisition Java Learning Video Package
