为什么加了posttion：fixed；之后，文字都堆叠在一起

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>百度一下,你就知道</title>
		<link rel="stylesheet" type="text/css" href="css/style.css" />
	</head>
	<body>
		<nav>
			<span class="nav">
				<a href="#">新闻</a>
				<a href="#">hao123</a>
				<a href="#">地图</a>
				<a href="#">直播</a>
				<a href="#">视频</a>
				<a href="#">贴吧</a>
				<a href="#">学术</a>
				<a href="#">更多</a>
			</span>
				<a href="#"id="anniu">登录</a>
				<a href="#" >设置</a>
		</nav>
		<div align="center" class="box" style="margin-top:170px;">
			<div>
				<img src="img/logo.png">
			</div>
			<div class="box2">
				<span><input type="text" value="" class="ssk" placeholder="   请输入内容" /></span>
				<span><input type="submit" value="百度一下" class="baidu" /></span>
			</div>
		</div>
		<div class="JieWei">
			<a href="#"style="left: 20px;">设为首页</a>
			<a href="#">关于百度</a>
			<a href="#">About Baidu</a>
			<a href="#">百度营销</a>
			<a href="#">使用百度前必读</a>
			<a href="#">意见反馈</a>
			<a href="#">帮助中心</a>
			<a href="#">京公网安备</a>
			<a href="#"></a>
		</div>
	</body>
</html>

body{
	margin: 0px;
	padding: 0px;
	height: 700px;
	width: 100%;
}
span{
	display: inline-block;
}
span>input{
	margin: 0px;
	padding: 0px;
}
img{
	width: 200px;
	height: 60px;
	margin-bottom: 20px;
}
.ssk{
	width: 548px;
	height: 40px;
	border-radius: 10px 0px 0px 10px;
}
.ssk:hover{
	
}
.baidu{	
	width: 108px;
	height: 40px;
	color: white;
	background-color: #4e6ef2;
	border-radius: 0px 10px 10px 0px;
	border: none;
	font-size: 15px;
}
.baidu:hover{
	background-color: #4664db;
}
.nav>a{
	text-decoration: none;
	margin-left: 23px;
	font-size: 13px;
	color: black;
	margin-top: 20px;
	float: left;
}

.nav>a:hover{
	color: #4e6ef2;
}
nav>a{
	text-decoration: none;
	margin-right: 23px;
	font-size: 13px;
	color: black;
	margin-top: 20px;
	float: right;
}
#anniu{
	background-color: #4664DB;
	width: 45px;
	padding: 5px;
	color: white;
	text-align: center;
	border-radius: 5px;
}

.JieWei>a{
	display: inline;/*行内元素*/
	text-decoration: none;/*去除下划线*/
	text-align: center;
	font-size: 13px;
	color: grey;
	position: fixed;
	
	bottom: 10px;
	width: 100%;
}
.JieWei>a:hover/*鼠标悬停*/{
	color: black;
}

.JieWei>a{
	display: inline;/*行内元素*/
	text-decoration: none;/*去除下划线*/
	text-align: center;
	font-size: 13px;
	color: grey;
}
.JieWei{
	position: fixed;

	bottom: 10px;
	width: 100%;
}
.JieWei>a:hover/*鼠标悬停*/{
	color: black;
}

posttion：fixed；是相对于显示窗口的定位，脱离了文档流。自然会与其它元素堆叠在一起、

你可以给每个posttion：fixed；元素设置不同的left 和 top 属性。

另外

posttion：fixed；不应该给a元素设置
应该给.JieWei 元素设置

因为fixed 固定布局（当浏览器进行滚动条滚动时，固定在某个部位） absolute一样是绝对布局直接定位在浏览器某个部位，如果有滚动条高度滚动，会被滚掉。

所以这两个布局都需要 left,right,top,bottom 这四个参数中的一个去布局

https://www.cnblogs.com/coldfishdt/p/6516151.html

fixed是绝对定位，标签开启绝对定位后在页面中不占据位置，根据你设置的定位位置，放置在文档的上层

您好，我是有问必答小助手，您的问题已经有小伙伴解答了，您看下是否解决，可以追评进行沟通哦~

如果有您比较满意的答案 / 帮您提供解决思路的答案，可以点击【采纳】按钮，给回答的小伙伴一些鼓励哦～～

ps:问答VIP仅需29元，即可享受5次/月有问必答服务，了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632

非常感谢您使用有问必答服务，为了后续更快速的帮您解决问题，现诚邀您参与有问必答体验反馈。您的建议将会运用到我们的产品优化中，希望能得到您的支持与协助！

速戳参与调研>>>https://t.csdnimg.cn/Kf0y