默认情况下，元素都是按照Normal Flow(标准流、文档流、常规流、正常流)进行排布，从左到右、从上到下按顺序摆放，互相之间不存在层叠影响。
在标准流中，可以使用margin、padding对元素进行定位，其中margin还可以设置负数。
当设置一个元素的margin或padding时，通常会影响到标准流中其他元素的定位效果，也不便于实现元素层叠的效果。
CSS 为定位提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。
定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
利用position属性可以对元素进行定位，常用取值有：static、relative、absolute和fixed，下面对每个进行分析说明
完成如下效果： 代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> sub, sup { font-size: 14px; } sub { position: relative; bottom: 6px; } sup { position: relative; top: 2px; } </style> </head> <body> <h1>请计算n<sub>1</sub>+n<sub>2</sub>+n<sup>2</sup>的值</h1> </body> </html>已知网站banner宽度为1920px，在浏览器中加载显示，默认展示为： 要想让主内容居中显示的话(不论窗口大小)，就可以使用相对定位了，最终效果为： 实现代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body{ margin: 0; padding: 0; } .box{ overflow: hidden; min-width: 1000px; } .box img{ position: relative; // 向左偏移图片宽度的一半，因banner宽度为1920，此处暂写死为960 left: -960px; // 将包含块向右偏移块宽度的50% margin-left: 50%; } </style> </head> <body> <div class="box"> <img src="./images//banner.jpg" alt=""> </div> </body> </html>实现商城网站右侧悬浮固定效果，如图： 实现代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> ul { list-style: none; padding: 0; margin: 0; } i { font-style: normal; } .right-aside { position: fixed; right: 30px; top: 100px; border: 1px solid #eee; } .right-aside a { display: inline-block; width: 62px; height: 48px; padding-top: 12px; font-size: 12px; border-bottom: 1px solid #eaeaea; text-align: center; } .right-aside a:last-child { border-bottom: none; } .right-aside a i { display: block; width: 20px; height: 20px; margin: 0 auto 3px; /* background-color: rebeccapurple; */ } a { text-decoration: none; color: #333333; } .right-aside ul li a:hover { color: #ff1e32; background-color: #fefefe; } .signin i { background-image: url('./images/icon-aside-right-signin.png'); } .shopcart i { background-image: url('./images/icon-aside-right-cart.png'); } .download i { background-image: url('./images/icon-aside-right-phone.png'); } .top i { background-image: url('./images/icon-aside-right-top.png'); } .signin:hover i { background-image: url('./images/icon-aside-right-signin-active.png'); } .shopcart:hover i { background-image: url('./images/icon-aside-right-cart-active.png'); } .download:hover i { background-image: url('./images/icon-aside-right-phone-active.png'); } .top:hover i { background-image: url('./images/icon-aside-right-top-active.png'); } .right-aside ul .top:hover i { background-image: url("./images/icon-aside-right-top-active.png"); } </style> </head> <body> <div class="box"> <div class="right-aside"> <ul> <li> <a class="signin" href=""> <i class="signini"></i> <span>签到</span> </a> </li> <li> <a class="shopcart" href=""> <i></i> <span>购物车</span> </a> </li> <li> <a class="download" href=""> <i></i> <span>下载</span> </a> </li> <li> <a class="top" href=""> <i></i> <span>TOP</span> </a> </li> </ul> </div> </div> </body> </html>目标效果： 实现代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> ul { list-style: none; padding: 0; margin: 0; } a { text-decoration: none; color: #333333; } .box { display: inline-block; } .item { position: relative; } .item ul { position: absolute; bottom: 36px; width: 285px; left: 0; right: 0; width: 280px; margin: 0 auto; text-align: justify; text-align-last: justify; } .item ul li { display: inline-block; } .item ul li a { display: block; width: 80px; height: 40px; font-size: 12px; border-radius: 40px; border: 1px solid #eeeeee; line-height: 40px; text-align-last: center; background-color: white; box-shadow: 0 0 0 1px rgba(0, 0, 0, 1); margin-top: 10px; } </style> </head> <body> <div class="box"> <div class="item"> <a href=""> <img src="./images/beauty-left-img.jpg" alt=""> </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> <li><a href="#">大牌彩妆</a></li> </ul> </div> </div> </div> </body> </html>实现效果：当鼠标悬浮在手机考拉上时，弹出下载二维码组件，如图： 实现代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box { position: relative; font-size: 14px; margin-left: 300px; } .box span { display: block; /* text-align: center; */ } .box .downloadapp { display: none; position: absolute; text-align: center; border: 1px solid #eaeaea; padding: 1px 1px; left: -58px; top: 30px; margin-left: 30px; } .box .downloadapp span { display: block; text-align: center; } .arrow { position: absolute; left: 52px; top: -3px; width: 8px; height: 8px; background-color: white; border-left: 1px solid blue; border-top: 1px solid blue; transform: rotate(45deg); } .box span:hover + .downloadapp{ display: inline; } </style> </head> <body> <div class="box"> <span>手机考拉</span> <div class="downloadapp"> <div class="arrow"></div> <img src="./images/qrcode.png" alt=""> <span>下载App</span> <span>领1000元新人礼包</span> </div> </div> </body> </html>各定位是否脱标及参照对象如下：
