Prestashop標題添加圖標/鏈接不可點擊

Question

我需要一些幫助標題圖標。我在徽標附近添加了圖標，並且我想讓它們鏈接，但它們不起作用。我可以點擊徽標，但我無法點擊它們。 這裏是代碼的一部分： <a id="header_logo" href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}"> <img class="logo" style="margin-bottom:10px;" src="https://www.irankiuparduotuve.lt/img/irankiu-parduotuve.png" alt="{$shop_name|escape:'htmlall':'UTF-8'}" /> </a> <a href="https://www.irankiuparduotuve.lt/info/kaip-pirkti/#4"> <img style="margin-bottom:10px; position: absolute; top: 13%; left: 23%;" src="https://www.irankiuparduotuve.lt/img/saugu.png" alt="Saugu pirkti!" /> </a> <a href="https://www.irankiuparduotuve.lt/info/kaip-pirkti/#7"> <img style="margin-bottom:10px; position: absolute; top: 13%; left: 31%;" src="https://www.irankiuparduotuve.lt/img/pristatymas.png" alt="Pristatymas visoje Lietuvoje!" /> </a>

，這是它看起來像在網站上

Answer 1

它可能是由引起寫得不好的CSS規則。您的徽標使用position:absolute;定位，這會造成所有問題。錨元素<a>靜態定位，同時其中的圖像爲position:absolute;。因此，錨元素不具有任何高度或寬度並且不可點擊。

你可以做的是編輯CSS規則的錨點和圖像標記：

<a href="https://www.irankiuparduotuve.lt/info/kaip-pirkti/#7" style=" 
    z-index: 11; margin-bottom: 10px; 
    position: absolute; top: 13%; 
    left: 31%; display: inline-block;"> 

<img style="/* margin-bottom:10px; */ /* position: absolute; */ 
    /* top: 13%; */ /* left: 31%; */ 
    /* display: inline-block; */" 
src="https://www.irankiuparduotuve.lt/img/pristatymas.png"> 

</a> 

對不起格式化較差。基本上，您需要將您的位置規則應用於<a>元素，而不是<img>

更多信息！