为什么我的寄存器 link 不工作？

Question

出于某种原因，我的寄存器 link 无法在我的 header 中使用，我们将不胜感激。

代码（在header）：

<header>
    <img src="PSE.jpg" height="100" width="250" alt="Logo" /> 
    <div id="search"><input type="text" name="query" class="query" id="query" value="Search..." autocomplete="off">
    <input class="button" type="submit" name="submit" value="Go"></div>
    <div id="login">Login</div>
    <div id="register"><a href="register.html">Register</a></div>       
    <form id="user"><input type="text" name="Username" value="Username"/>
    <input type="password" name="Password" value="password"/></form>        
    <div id="facebook"><a><img src="facebook-icon.png" height="25" width="25" alt="facebook"/></a></div>
    <div id="twitter"><a><img src="twitter-icon.jpg" height="25" width="25" alt="twitter"/></a></div>
    <div id="youtube"><a><img src="youtube-icon.png" height="25" width="25" alt="youtube"/></a></div>
</header>

css:

header{
    margin: 0 auto;
    width: 100%;
    height: 110px;
    text-align: left;
    display: block;
    background-color:#268ACC;
    }

    header img{
    text-align:left;
    padding-left: 10px;
    padding-bottom: 5px;
    padding-top: 5px;
    }       
    #search {
    text-align: left;
    position: relative;
    left: 300px;
    bottom: 40px;
    }
    #user{
    text-align: left;
    position: relative;
    left: 550px;
    bottom: 60px;
    }
    #login{
    text-align: left;
    position: relative;
    bottom: 40px;
    left: 550px;
    margin-top:-50px;
    }
    #register{
    text-align: left;
    position: relative;
    bottom: 65px;
    left: 710px;        
    }
    #register a{
    list-style-type: none;
    margin: 0px;
    text-decoration: none;
    vertical-align: middle; 
    }   
    #facebook{
    text-align: right;
    position: relative;
    bottom: 160px;
    padding-right: 5px;
    }
    #twitter{
    text-align: right;
    position: relative;
    bottom: 160px;
    padding-right: 5px;
    }
    #youtube{
    text-align: right;
    position: relative;
    bottom: 160px;
    padding-right: 5px;

编辑：现在添加了所有 header 元素和 css。只是为了添加一些细节，因为它需要我，左侧图像中 header 的布局，然后是搜索栏，然后是登录输入、社交媒体图像和我的寄存器 link我正在尝试修复。

Answer 1

您忘记设置 div 的宽度和高度。

试试这个：

#register{
  text-align: left;
  position: relative;
  width: 100%;
  height: 80px;
}
#register a{
  list-style-type: none;
  margin: 0px;
  text-decoration: none;
  vertical-align: middle;
}

Answer 2

由于相对定位，div重叠。因此，只需将像 9999 这样的高数字的 z-index 添加到你相对定位的 div 中，如下所示：

#register{
    text-align: left;
    position: relative;
    bottom: -20px;
    left: 100px;
    z-index: 9999;        
}

而且它应该能很好地工作。

为什么我的寄存器 link 不工作？

Why is my register link not working?

html

href

hyperlink

atag