溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“HTML子絕父相實例分析”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“HTML子絕父相實例分析”吧!
一、子絕父相
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;
}到此，相信大家對“HTML子絕父相實例分析”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
