欢迎来到Doc100.Net免费学习资源知识分享平台!
您的位置:首页 > 程序异常 >

请问li标签中position:relative的作用

更新时间: 2014-01-05 00:52:42 责任编辑: Author_N1

 

请教li标签中position:relative的作用
有个纵向二级列表,如下

<div id="menu">
<ul>
<li><a href="@#">首页</a></li>
<li><a href="#">网页版式布局</a>
<ul>
<li><a href="#">自适应宽度</a></li>
<li><a href="#">固定宽度</a></li>
</ul>
</li>
<li><a href="#">div+css教程</a>
<ul>
<li><a href="#">新手入门</a></li>
<li><a href="#">视频教程</a></li>
<li><a href="#">常见问题</a></li>
</ul>
</li>
<li><a href="#">div+css实例</a></li>
<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>
</div>



body { font-family: Verdana; font-size: 12px; line-height: 1.5; }
a { color: #000; text-decoration: none; }
#menu { width: 100px; border: 1px solid #CCC; border-bottom:none;}
#menu ul { list-style: none; margin: 0px; padding: 0px; }
#menu ul li { background: #eee; padding: 0px 8px;border-bottom: 1px solid #CCC;
line-height: 26px; height: 26px;position:relative;}
#menu ul li ul {position: absolute; left: 100px; top: 0px; 
width:100px;border:1px solid #ccc; border-bottom:none;}

其中,#menu ul li下的position:relative;作用是什么?
这个属性是相对定位,但我没有设置top、left等属性为什么不加这个属性二级菜单位置会偏移呢?

加position:relative;的


不加position:relative;的


--参考方法--
恩,对的,那是relative的一个作用。
但现在加position:relative的作用,不是用于给他自己定位,而是为了他的子元素相对于他进行定位。就是让li下的ul(二级菜单)相对与这个li进行定位...
好绕口的样子...
上一篇:上一篇
下一篇:下一篇

 

随机推荐程序问答结果

 

 

如对文章有任何疑问请提交到问题反馈,或者您对内容不满意,请您反馈给我们DOC100.NET论坛发贴求解。
DOC100.NET资源网,机器学习分类整理更新日期::2014-01-05 00:52:42
如需转载,请注明文章出处和来源网址:http://www.doc100.net/bugs/t/898/
本文WWW.DOC100.NET DOC100.NET版权所有。