无法点击超链接

Question

为什么我不能点击注册，忘记通过，复选框链接在这里？并且屏幕已折叠，因此拖动它以增加样式的宽度。任何人都知道它为什么会崩溃，即使它在bootstrap容器中？

jsfiddle：https://jsfiddle.net/germfpko/

  header{
    background-color: #2C2C2C;
    color: #FFF;
    padding-top: 20px;
}

header .login-form{
    position: absolute;
    top: 30px;
    right: 300px;
    color: black;
}

header a{
    text-decoration: none;
    color: #FFF;
}

header li{
     list-style-type: none;
}

header img.logo{
    float: left;
}

.login-form input[type="text"]{
    height: 30px;
    border: 2px solid #ffe6e6;
    border-radius: 3px;
}

.login-form input[type="text"]:focus{
    border: 2px solid #ffe6e6;
}

.login-form input[type="password"]{
    height: 30px;
    border: 2px solid #ffe6e6;
    border-radius: 3px;
}

.login-form input[type="password"]:focus{
    border: 2px solid #ffe6e6;
}

.login-form .login-options{
    position: relative;
    bottom: 20px;
    left: 230px;
    color: #FFF;
}

.navbar{
    padding-top: 70px;
}

.navbar ul {
    list-style-type: none;
}

.navbar li {
    display: inline-block;
    width: auto;
    font-size: 18px;
    padding-right: 30px;
}

.navbar li a {
    display: block;
    color: #FFFFFF;
    text-decoration: none;
}

.navbar li a:hover{
    background-color: #ff8566;
}

CSS

XmlDocument newdoc = new XmlDocument();
newdoc.InnerXml = " <?xml version=\"1.0\" encoding=\"utf-16\"?><HUMAN_VERIFICATION><RESPONSE_DATA><RESPONSE_STATUS><ERR>100</ERROR><MESSAGE>successful</MESSAGE></RESPONSE_STATUS><CONTACT_NUMBER>3120202456011</ CONTACT _NUMBER><PERSON_DATA><NAME>Alex</NAME><DATE_OF_BIRTH>10-9-1982</DATE_OF_BIRTH><BIRTH_PLACE>Washington</BIRTH_PLACE><EXPIRY>2020-12-15</EXPIRY></PERSON_DATA><CARD_TYPE>idcard</CARD_TYPE></RESPONSE_DATA></HUMAN_VERIFICATION>";

var selectnode = "HUMAN_VERIFICATION/RESPONSE_DATA/PERSON_DATA";
var nodes = newdoc.SelectNodes(selectnode);
foreach (XmlNode nod in nodes)
{
    string name   = nod["NAME"         ].InnerText;
    string dob    = nod["DATE_OF_BIRTH"].InnerText;
    string place  = nod["BIRTH_PLACE"  ].InnerText;
    string expiry = nod["EXPIRY"       ].InnerText;
    Console.WriteLine("Person: {0} {1} {2} {3}", name, dob, place, expiry);
}

Answer 1

header{
	background-color: #2C2C2C;
	color: #FFF;
	padding-top: 20px;
}

header .login-form{
	position: absolute;
	top: 30px;
	right: 300px;
	color: black;
    z-index:9999;
}

header a{
	text-decoration: none;
	color: #FFF;
}

header li{
	 list-style-type: none;
}

header img.logo{
	float: left;
}

.login-form input[type="text"]{
	height: 30px;
	border: 2px solid #ffe6e6;
	border-radius: 3px;
}

.login-form input[type="text"]:focus{
	border: 2px solid #ffe6e6;
}

.login-form input[type="password"]{
	height: 30px;
	border: 2px solid #ffe6e6;
	border-radius: 3px;
}

.login-form input[type="password"]:focus{
	border: 2px solid #ffe6e6;
}

.login-form .login-options{
	position: relative;
	bottom: 20px;
    left: 230px;
    color: #FFF;
  
}
.navbar{
	padding-top: 70px;
}

.navbar ul {
	list-style-type: none;
}

.navbar li {
	display: inline-block;
	width: auto;
	font-size: 18px;
	padding-right: 30px;
}

.navbar li a {
	display: block;
	color: #FFFFFF;
	text-decoration: none;
}

.navbar li a:hover{
	background-color: #ff8566;
}

<header>
		<div class="container">
			<img class="logo" src="" alt="lol">
			
			<form class="login-form">
				<input type="text" placeholder="Email Adress">
				<input type="password" placeholder="Password">

				<button type="submit" class="btn btn-primary">Login</button>
				<br>
				<input type="checkbox" name="remember"><span style="color:#FFF">Remember me</span>
				<div class="login-options">
					<ul>
						<li><a href="#">Reg</a></li>
						<li><a href="#">Forgot pass?</a></li>
					</ul>
				</div>
			</form>
		</div>
		<div class="navbar">
			<div class="container">
				<ul>
					<li><a href="#">!!</a></li>
					<li><a href="#">2</a></li>
					<li><a href="#">3</a></li>
					<li><a href="#">Contact</a></li>
				</ul>
			</div>
		</div>
	</header> <!--end of header-->

只需添加以下css

header .login-form{z-index:9999;}

Answer 2

只需删除<header>标记，一切正常。

https://jsfiddle.net/oed42opq/

Answer 3

您无法点击超链接，因为您已设置的位置

.login-form为绝对;并将.navbar的top-padding设置为70px;

删除 padding-top 时会有效 只需插入margin-top ，就像

一样

.navbar{
    margin-top: 70px;
}