HTML <a> 标签在别处创建一个不可见的按钮答案

【问题标题】：HTML <a> tag creates an invisible buttuon elsewhereHTML <a> 标签在别处创建一个不可见的按钮
【发布时间】：2022-11-13 03:16:57
【问题描述】：

我在一个虚拟练习网站上工作，我尝试使用带有图像的锚标记，以便我可以从该图像获得超链接，但每当我尝试使用其位置属性（相对）更改图像的位置时。它只是在屏幕上的其他地方创建一个相同大小的不可见链接。我尝试了多种方法，但它一直在发生。除非我使用 position: absolute 移动它。帮助。提前致谢。 ;)

[而且我知道它会创建一个相同大小的不可见超链接，因为农药扩展允许我看到屏幕上的所有元素。]

我想当我尝试将图像移动到其他位置时会出现问题，但我不知道为什么会发生。[请忽略我效率低下的代码，几天前开始 Web 开发;)]

body{
    margin: 0;
    background-color: #222831;
}

nav{
    background-color: #ebebeb;
    position: relative;
    padding: 5px;
}

nav .icon{
    margin: 0;
    display: inline-block;
    margin: 5px 0 0px 10px;
    color: #121212;
    height: 25px;
    width: 25px;
}

.search-bar{
    position: relative;
    bottom: 7px;
    left: 10px;
    background: url(../Images/search-icon.png) no-repeat scroll 2px 2px;
    padding-left:30px;
    width: 400px;
}

nav h1{
    display: inline-block;
    position: relative;
    left: 10%;
}

.profile-pic{
    margin: 0;
    position: absolute;
    color: #121212;
    height: 30px;
    width: 30px;
    right: 200px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../CSS/home.css">
    <link rel="icon" href="../Images/menu.png">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home</title>
</head>
<body>
        <nav>
            <img src="../Images/menu.png" alt="SQUARE LOGO" class = "icon">
            <input type="text" class="search-bar" id="search-bar">
            <h1>SQUARE</h1>
        </nav>
        
 <a href="index.html"><img  class="profile-pic" src="../Images/user.png" alt="Profile Picture"  href="index.html "></a>  <!-- This is the code producing error--!>
 
    
</body>
</html>

【问题讨论】：

HTML 标签总是需要一个结束提示。例如，<a> 需要“对应”</a>。在您的<img> 和<input> 标签中，您没有关闭对应项，这是可以接受的，因为您可以在同一个标签中点击一个关闭标签，如下所示：<input type="text" class="search-bar" id="search-bar" />。注意最后的/>。这意味着这个标签不会有结束的对应物。

标签： html css

【解决方案1】：

您不需要使用相对，因为绝对定位将默认相对于身体。您确实需要将 left 或 top 添加到绝对元素

body{
    margin: 0;
    background-color: #222831;
}

nav{
    background-color: #ebebeb;
   
    padding: 5px;
}

nav .icon{
    margin: 0;
    display: inline-block;
    margin: 5px 0 0px 10px;
    color: #121212;
    height: 25px;
    width: 25px;
}

.search-bar{
   
    bottom: 7px;
    left: 10px;
    background: url(../Images/search-icon.png) no-repeat scroll 2px 2px;
    padding-left:30px;
    width: 400px;
}

nav h1{
    display: inline-block;
   
    
}

.profile-pic{
    margin: 0;
    position: absolute;
    color: #121212;
    height: 30px;
    width: 30px;
    right: 200px;
    left:50%;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../CSS/home.css">
    <img  src="https://via.placeholder.com/50">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home</title>
</head>
<body>
        <nav>
            <img src="https://via.placeholder.com/50" alt="SQUARE LOGO" class = "icon">
            <input type="text" class="search-bar" id="search-bar">
            <h1>SQUARE</h1>
        </nav>
        
 <a href="index.html"><img  class="profile-pic" src="https://via.placeholder.com/25" alt="Profile Picture"  > </a>  
 
    
</body>
</html>

【讨论】：