定位：
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;}css的基础用法（下）
原文地址：https://www.cnblogs.com/whrTC/p/9220628.html