为啥a设置绝对定位后不能锚点链接，但是li可以
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="reset.css">
<style>
.box{
width: 806px;
height: 592px;
margin: 100px auto;
}
.three{
width: 806px;
height: 507px;
position: relative;
}
/* 此处若是给A设置position就不会跳转锚点链接 */
.threeli{
position: absolute;
left: 0;
top: 0;
}
img{
display: block;
}
.two{
margin-top: 5px;
}
.two>li{
float: left;
margin-right: 5px;
}
.three li:target{
z-index: 2;
}
</style>
</head>
<body>
<div class="box">
<ul class="three">
<liid="jd01"><a href=""><img src="img/jd001.jpg"width: "806px" ; height="507px"></a></li>
<li id="jd02"><a href=""><img src="img/jd002.jpg"width: "806px" ; height="507px"></a></li>
<li id="jd03"><a href=""><img src="img/jd003.jpg"width: "806px" ; height="507px"></a></li>
<li id="jd04"><a href=""><img src="img/jd004.jpg"width: "806px" ; height="507px"></a></li>
<li id="jd05"><a href=""><img src="img/jd005.jpg"width: "806px" ; height="507px"></a></li>
<li id="jd06"><a href=""><img src="img/jd006.jpg"width: "806px" ; height="507px"></a></li>
</ul>
<ul class="two">
<li ><a href="#jd01"><img src="img/jd001.jpg"width: "130" ; height="80px"></a></li>
<li ><a href="#jd02"><img src="img/jd002.jpg"width: "130" ; height="80px"></a></li>
<li ><a href="#jd03"><img src="img/jd003.jpg" width: "130" ; height="80px"></a></li>
<li ><a href="#jd04"><img src="img/jd004.jpg" width: "130" ; height="80px"></a></li>
<li ><a href="#jd05"><img src="img/jd005.jpg"width: "130p ; height="80px"></a></li>
<li style="margin: 0;"><a href="#jd06"><img src="img/jd006.jpg" width: "130px" ; height="80px"></a></li>
</ul>
</div>
</body>
</html>
你有一个问题与你的风格和你添加样式的所有内容类3和6图片上彼此,然后“a”标记的href你给是空所以你点击它,它不会跳,但刷新页面 这样可不可行？
<ul class="three">
<liid="jd01"><a href=""><img src="img/jd001.jpg"width: "806px" ; height="507px"></a></li>
<li id="jd02"><a href=""><img src="img/jd002.jpg"width: "806px" ; height="507px"></a></li>
<li id="jd03"><a href=""><img src="img/jd003.jpg"width: "806px" ; height="507px"></a></li>
<li id="jd04"><a href=""><img src="img/jd004.jpg"width: "806px" ; height="507px"></a></li>
<li id="jd05"><a href=""><img src="img/jd005.jpg"width: "806px" ; height="507px"></a></li>
<li id="jd06"><a href=""><img src="img/jd006.jpg"width: "806px" ; height="507px"></a></li>
</ul>
页:
[1]