1、定位定义

通过position属性指定了元素的定位类型，设置了该属性后能脱离文档流。
relative 相对定位
absolute 绝对定位
fixed 固定定位
它有四个方向进行位置调整：left top right bottom

2、相对定位

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>相对定位</title>
  7.     <style>
  8.         .container{
  9.             width: 300px;
  10.             height: 300px;
  11.             background-color:rebeccapurple;
  12.             position: relative;
  13.             left: 50px;
  14.             top: 50px;
  15.         }
  16.         .box1{
  17.             width: 100px;
  18.             height: 100px;
  19.             background-color:red;
  20.             position: relative;
  21.             left: 10px;
  22.             top: 10px;
  23.         }
  24.     </style>
  25. </head>
  26. <body>
  27.     <div class="container">
  28.         <div class="box1"></div>
  29.     </div>
  30. </body>
  31. </html>

效果如下，设置了相对定位或者绝对定位后，可以设置容器离left和top的距离像素，相对定位或者绝对定位是找具有定位元素的父级元素进行位置调整，如果父级元素不存在定位，则继续向上寻找，直到顶层。
image.png

3、绝对定位

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>绝对定位</title>
  7.     <style>
  8.         .box1{
  9.             width: 300px;
  10.             height: 300px;
  11.             background-color:rebeccapurple;
  12.             position: absolute;
  13.             left: 50px;
  14.             top: 50px;
  15.         }
  16.         .box2{
  17.             width: 300px;
  18.             height: 300px;
  19.             background-color:red;
  20.             position: absolute;
  21.             left: 100px;
  22.             top: 100px;
  23.         }
  24.         .box3{
  25.             width: 300px;
  26.             height: 300px;
  27.             background-color:blue;
  28.             position: absolute;
  29.             left: 150px;
  30.             top: 150px;
  31.         }
  32.     </style>
  33. </head>
  34. <body>
  35.     <div class="box1"></div>
  36.     <div class="box2"></div>
  37.     <div class="box3"></div>
  38. </body>
  39. </html>

如下图，设置了几个绝对定位就会出现几层，层是可以叠加的。
与浮动不一样，浮动的元素都在一个同一个浮动层上不会出现叠加：
image.png

4、固定定位

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>固定定位</title>
  7.     <style>
  8.         .box1{
  9.             width: 100px;
  10.             height: 300px;
  11.             background-color:rebeccapurple;
  12.             position: fixed;
  13.             right: 0px;
  14.             top: 500px;
  15.         }
  16.         .box2{
  17.             height: 600px;
  18.         }
  19.     </style>
  20. </head>
  21. <body>
  22.     <div class="box1"></div>
  23.     <div class="box2"></div>
  24.     <div class="box2"></div>
  25.     <div class="box2"></div>
  26.     <div class="box2"></div>
  27.     <div class="box2"></div>
  28. </body>
  29. </html>

如下图，浮动层会固定在页面的某一个地方：
image.png
如淘宝固定的边栏：
image.png