2
回答
css下拉菜单绝对定位的作用?
华为云4核8G,高性能云服务器,免费试用   

我用css实现了一个下拉菜单定位的问题。已经可以实现了。但是我在网上看到很多人实现的下拉菜单用到了定位,我想知道这个定位解决了什么问题?代码如下:

<div id="nav">
		<ul>
			<li class="horizonNav"><a href="#">首页</a></li>
			<li class="horizonNav"><a href="#">产品</a>
				<ul>
					<li><a href="#">手机</a></li>
					<li><a href="#">单反</a></li>
					<li><a href="#">微单</a></li>
					<li><a href="#">硬盘</a></li>
					<li><a href="#">鼠标</a></li>
				</ul>
			</li>
			<li class="horizonNav"><a href="#">服务</a>
				<ul>
					<li><a href="#">主机</a></li>
					<li><a href="#">域名</a></li>
					<li><a href="#">DDOS</a></li>
				</ul>
			</li>
			<li class="horizonNav"><a href="#">新闻</a></li>
			<li class="horizonNav"><a href="#">联系</a></li>
		</ul>
	</div>



css代码如下:

<style type="text/css">
* {
	padding: 0;
	margin: 0;
}
a {
	text-decoration: none;
}

#nav {
	height: 300px;
	width: 450px;
	border: 1px solid blue;
}
ul {
	list-style: none;
}
.horizonNav {
	float: left;
	width: 80px;
	border: 1px solid gray;
}
ul li ul {
	text-align: center;
	overflow: hidden;
	width: 80px;
	display: none;
}
ul li:hover ul {
	display: block;
}
ul li ul li {
	border: 1px solid red;
	float: none;
	width: 80px;
}
</style>



上面这些代码已经可以实现了纯css导航菜单。但是网上很多人的例子会添加一个定位:

ul li ul {
	text-align: center;
	overflow: hidden;
	width: 80px;
	display: none;
	position: absolute;//增加了绝对定位
}



<无标签>
举报
unix
发帖于3年前 2回/1K+阅
共有2个答案 最后回答: 3年前

做的不完整吧。首先你要搞明白position:absolute;是相对于那个元素去觉得定位的。默认通常是整个文档。 

我们会把绝对定位的上一个元素加上position:relative;这样的话绝对定位就是相对于那个relative元素开始来绝对定位的。

如果你上面还有元素。那么不要绝对定位就会出错。

看这个例子:没有了position:absolute就彻底乱了。加上就不会出问题。

http://jsfiddle.net/fh7gbppy/

而且除了这个之外你的.horizonNav不是float而是用

display:inline //for IE8 and below

display:inline-block //for other browser 

来使的这些元素水平排列。

而且我也不明白overflow用来干什么呀。难道你的内容会超过Box的width和height??? 


--- 共有 4 条评论 ---
robinclark回复 @kevincat : CSS布局非常灵活。写法是很随意的。每个人写的可能都不一样。没必要纠结这个的。自己实现觉得好就行。 3年前 回复
unix回复 @robinclark : 可是我自己的本地预览都是很正常的。没有发现问题。 难道position是为了兼容行的? 3年前 回复
robinclark回复 @kevincat : 看我的给你的例子没呀。就是不正常呀。加上才会正常呀。 3年前 回复
unix你用什么浏览器乱掉的?我这里的chrome和safari都是正常的。 3年前 回复

css定位常用4种

static //这个是默认的,只有margin起作用

relative //相对定位 意思是元素本身还是static,但是元素里面的absolute元素相对与该元素定位,       absolute默认是对body进行绝对定位,relative只有margin起作用

absolute //绝对定位,left,top,right,bottom,margin都起作用

fixed //相对视窗定位,left,top,right,bottom,margin 起作用

顶部