HTML <a> tag creates an invisible buttuon elsewhere-CodePudding

I was working on a dummy practice site and I tried using an anchor tag with an image so that I could have hyperlink from that image but whenever I try to change the position of the image using its position property(Relative). It just creates a invisible link of same size elsewhere on the screen. I tried multiple things but it keeps happening. Unless I move it using position: absolute . Help. Thanks in advance. ;)

[and I know it creates an invisible hyperlink of same size because of the pesticide extension which allows me to see all the elements on the screen.]

I guess the problem occurs when I try to move the image to a different location but I don't know why it is happening.[ And please ignore my inefficient code, started Web development couple of days ago ;)]

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"  id="search-bar">
            <h1>SQUARE</h1>
        </nav>
        
 <a href="index.html"><img   src="../Images/user.png" alt="Profile Picture"  href="index.html "></a>  <!-- This is the code producing error--!>
 
    
</body>
</html>

CodePudding user response：

you don't need to use relative as the absolute positioning will default relative to the body. You do need to add left or top to the absolute element

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"  id="search-bar">
            <h1>SQUARE</h1>
        </nav>
        
 <a href="index.html"><img   src="https://via.placeholder.com/25" alt="Profile Picture"  > </a>  
 
    
</body>
</html>