一、子絕父相 1.只使用相對定位，對圖片的位置進行精准定位。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin:0; padding:0; } u ...
一、子絕父相
1.只使用相對定位，對圖片的位置進行精准定位。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ 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){ /*這裡複習了同類標簽選擇第幾個進行設置它的樣式*/ background-color: blue; } ul li img{ position:relative; left: -30px; top: -14px; width: 20px; height: 16px; /*這裡可以先寫個大概的數字，然後利用谷歌開發者定位進行滾動數據調節*/ } </style> </head> <body> <ul> <li>拍賣金融</li> <li>美妝館</li> <li>京東超市</li> <li> 全球購<img src="bear.jpg"> </li> <li>閃購</li> <li>團購</li> <li>拍賣</li> <li></li> </ul> </body> </html>
這種方式的的缺點：可以看到雖然利用相對定位進行了數據調節來達到讓圖片定位的效果，但是由於相對定位是在標準流的基礎上進行調節，所以原來圖片的位置（也就是全球購後面的那塊區域）依然是被占用著的。
2.下麵只使用絕對定位來進行試驗。
ul li img{
position:absolute;
left: 900px;
top: 1px;
width: 20px;
height: 16px;
}
這種方式的缺點：上次連載說到，絕對定位會以首屏來進行定位，因此當改變網頁大小的時候，將會造成變形，定位到了不合理的地方。
3.因此要同時運用絕對定位和相對定位進行編排才最合理
ul li:nth-of-type(4){
/*這裡複習了同類標簽選擇第幾個進行設置它的樣式*/
background-color: blue;
position:relative;
}
ul li img{
/*介紹一個方法：子絕父相，即子元素使用絕對定位，父元素使用相對定位*/
position:absolute;
left: 41px;
top: 1px;
width: 20px;
height: 16px;
}
三、源碼：
D153_SubAbsoluteFathRelative.html
地址:
https://github.com/ruigege66/HTML_learning/blob/master/D153_SubAbsoluteFathRelative.html
2.CSDN：https://blog.csdn.net/weixin_44630050
3.博客園：https://www.cnblogs.com/ruigege0000/
4.歡迎關註微信公眾號：傅里葉變換，個人賬號，僅用於技術交流，後臺回覆“禮包”獲取Java大數據學習視頻禮包
