一、子絕父相
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大資料學習視頻禮包
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/86989.html
標籤：Html/Css
上一篇：HTML5