css定位技术解析
css定位技术，在网页设计开发中有着很重要的作用。有许多的案例都可以用到它。比如说二级菜单，弹窗，图片轮播等等。现在我来总结一下它的使用。
css定位属性是position,它有如下的几种属性值：
1：static:(默认值)无特殊定位，对象遵循正常文档流。top，right，bottom，left等属性不会被应用。
2：relative：对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。
3：absolute：对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。
4：fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。IE6及以下不支持此参数值
有几点要注意：
1：relative对象是不会脱离文档流的。就算relative平移了它的位置，它以前位置也是不可能出现其他元素的。relative平移的参照对象位置是relative元素本身没有平移时的位置。
2：absolute对象是会脱离文档流的，absolute平移的参照对象位置是它最近的一个非static定位的父元素。
3：fixed对象是会脱离文档流的，fixed平移的参照对象位置是window这个元素（也就是我们当前可以看到窗口）。
对比以上他们的特征我们可以得出。fixed这个定位经常用于固定某个元素在窗口的位置（不管窗口是否有拖动），比如说大家经常看到的网页旁边的QQ客服，当前可视话窗口的居中弹窗等等。absolute经常用于一些元素层叠和一些css动画的实现，比如大家经常看到的二级菜单，图片轮播等等。下面我就用个事例来描述它们的使用。
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Document</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta name="keywords" content="">
<meta name="description" itemprop="description" content="">
<meta name="protocol" content="1">
<meta itemprop="name" content="测试">
<meta itemprop="image" content="http://9.url.cn/edu/img/logo_pc_rich.png"/>
<style rel="stylesheet" type="text/css">
*{margin:0px;padding:0px;font-family:"微软雅黑";font-size:12px;text-decoration:none;color:black;}
.banner{width:98%;height:30px;margin:0 auto;border:1px solid red;position:fixed;top:5px;left:1%;}
ul{list-style:none;height:100%;}
ul li{float:left;width:100px;height:22px;line-height:22px;padding:4px 0;border-right: 1px solid gray ;position:relative;margin:0px;text-align:center;}
ul li div{width:100px;position:absolute;top:100%;left:-1px;border:1px solid gray;border-top:0;display:none;}
ul li:hover{background:red;}
ul li:hover div{display:block;}
ul li div span{display:block;width:100%;height:22px;line-height:22px;text-align:center;border-top:1px solid gray;}
ul li div span a{display:block;width:100%;height:100%;}
ul li div span:hover{background:red;cursor:pointer;}
</style>
</head>
<body>
<div class="banner" id="header">
<ul>
<li>
<a href="javasript:;">首页</a>
<div class="b_menu">
<span><a href="javasript:;">首页</a></span>
<span><a href="javasript:;">首页</a></span>
<span><a href="javasript:;">首页</a></span>
<span><a href="javasript:;">首页</a></span>
</div>
</li>
<li>
<a href="javasript:;">咨询</a>
<div class="b_menu">
<span><a href="javasript:;">咨询</a></span>
<span><a href="javasript:;">咨询</a></span>
<span><a href="javasript:;">咨询</a></span>
</div>
</li>
<li>
<a href="javasript:;">活动</a>
<div class="b_menu">
<span><a href="javasript:;">活动</a></span>
<span><a href="javasript:;">活动</a></span>
</div>
</li>
</ul>
</div>
<div>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
</div>
</body>
</html>其中在窗口一直下拉的时候菜单栏一直置顶显示，关键代码是：
.banner{width:98%;height:30px;margin:0 auto;border:1px solid red;position:fixed;top:5px;left:1%;}中的fiexed定位，和top,left的属性的设置。
其中二级菜单的关键代码是：
ul li{float:left;width:100px;height:22px;line-height:22px;padding:4px 0;border-right: 1px solid gray ;position:relative;margin:0px;text-align:center;}
ul li div{width:100px;position:absolute;top:100%;left:-1px;border:1px solid gray;border-top:0;display:none;}中ul li的relative定位和ul li div中的absolute定位。注意这里的absoulte的定位是相对于ul li来说的。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
