定位：
1 <html> 2 <head> 3 <meta charset="utf-8" /> 4 <title>定位</title> 5 <style> 6 div{width:500px;height:500px;background:red; 7 position:relative;left:20px;top:20px;} 8 i{position:absolute;left:15px;bottom:15px; 9 width:30px;height:30px;background:blue;} 10 b{width:60px;height50px;background:yellow; 11 position:fixed;right:10px;top:10px;} 12 13 </style> 14 </head> 15 <body> 16 <div> 17 <i></i> 18 </div> 19 <b></b> 20 </body> 21 </html>
position：
相对定位：relative，1、不改变元素的类型；2、参照物是他自己本身；作用：是给绝对定位当父级用。
绝对定位：absolute，1、元素变成块；默认的参照物是body；如果父级给了相对定位，他的参照物是父级。
固定定位：position：fixed；1、参照物是屏幕可视区；2、元素变成块；
注意：加了定位就要写top，bottom，left，right。
京东页面导航栏：
1 <html> 2 <head> 3 <meta charset="utf-8" /> 4 <title>京东</title> 5 <link rel="stylesheet" href="css/base.css" /> 6 <style> 7 header_top{width:100%; 8 height:30px;background:#e3e4e5; 9 border-bottom:1px solid #dfdfe0;} 10 header_nav{width:989px;height:30px; 11 position:absolution;right:30px;} 12 .header_top .header_nav .fl li{float:right;color:#999999; 13 line-height:30px;} 14 .header_top .header_nav .fr li{float:left;color:999999; 15 line-height:30px;} 16 17 </style> 18 </head> 19 <body> 20 <div class="header_top"> 21 <div class="header_nav"> 22 <ul class="fl"> 23 <li>位置</li> 24 </ul> 25 <ul class="fr"> 26 <li>你好，请先登录 免费注册</li> 27 <li>我的订单</li> 28 <li>我的京东</li> 29 <li>京东会员</li> 30 <li>企业采购</li> 31 <li>客户服务</li> 32 <li>网站导航</li> 33 <li>手机京东</li> 34 </ul> 35 </div> 36 </div> 37 </body> 38 </html>
1 *{margin:0;padding:0;} 2 body,h1,h2,h3,h4,h5,h6,p,div,ul,ol,dl,i,em,strong,background,form{font-size:12px,font-family:'Microsoft Yahei';} 3 ui,ol,dl{list-style:none;} 4 a{text-decoration:none;color:#000;} 5 i,em{font-style:normal;} 6 b,strong{font-weight:normal;} 7 input,textarea{outline:none;resize:none;} 8 .fl{float:left;} 9 .fr{float:right;} 10 .clearFix:after{display:block;content:'';clear:both;zoom:1;}