如果我們要將hot圖片放到下圖的位置，我們該怎麼實現。
首先我們來進行布局，用一個div包括一個a標籤和img標籤，並給a標籤設定樣式，如下代碼：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0; padding: 0; } .hot a { display: inline-block; height: 32px; width: 80px; text-decoration: none; /*去掉a標籤的預設樣式底線*/ background: url(img/button1.jpg); font-size: 13px; line-height: 32px; text-align: center; } </style></head><body><br/><br/><br/><div class="hot"> <a href="#">首頁導航</a><img src="img/hot.png" alt=""></div></body></html>
但是運行後，我們發現hot圖片在a標籤的旁邊
怎麼樣才能讓hot圖片到達圖片中的位置呢。這裡我們就需要使用子絕父相來進行設定了，子絕父相就是指子項目設定絕對位置，而父元素設定相對定位，然後設定子項目的top、left、right、bottom的值，我們就可以讓子項目到達相應的位置
給上述代碼的style中添加下面的代碼，我們就會發現hot圖片移動到了目標位置
.hot { position: relative;}.hot img { position: absolute; top: -10px; left: 20px;}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
