一、绝对定位

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <style>
  9.         *{
  10.             margin:0;
  11.             padding:0;
  12.         }
  14.         div{
  15.             width:800px;
  16.             height: 200px;
  17.             background: pink;
  18.             margin:0 auto;     
  19.           position: relative;
  20.         }
  21.         p{
  22.             width:200px;
  23.             height: 150px;
  24.             float: left;
  26.         }
  27.         p:nth-child(1){
  28.             background: red;
  29.             position: absolute;
  30.             top:20px;
  31.             left:20px;
  32.             z-index: 1;
  33.         }
  34.         p:nth-child(2){
  35.             background: green;
  36.             position:absolute;
  37.             left:30px;
  38.             top:30px;
  39.             z-index: 2;
  40.         }
  41.         p:nth-child(3){
  42.             background: yellow;   
  43.             position:absolute;
  44.             left:40px;
  45.             top:40px; 
  46.             z-index: 3;       
  47.         }
  48.     </style>
  49. </head>
  50. <body>
  51.     <!--
  52.        相对于父级元素的绝对定位，浮出、脱离布局流，它不占据空间，就是我们所说的层，其位置相对于最近的
  53. 已定位父元素而言的位置，可直接指定 “left”、“top”、“right” 以及 “bottom” 属性。若父级都没有定位，则
  54. 以 html（根元素）。层叠的顺序 z-index:value
  55.     -->
  56.     <div>
  57.         <p></p>
  58.         <p></p>
  59.         <p></p>
  60.     </div>
  61. </body>
  62. </html>

二、相对定位

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <style>
  9.         *{
  10.             margin:0;
  11.             padding:0;
  12.         }
  14.         div{
  15.             width:800px;
  16.             height: 200px;
  17.             background: pink;
  18.             margin:0 auto;     
  20.         }
  21.         p{
  22.             width:200px;
  23.             height: 150px;
  24.             float: left;
  26.         }
  27.         p:nth-child(1){
  28.             background: red;
  29.         }
  30.         p:nth-child(2){
  31.             background: green;
  32.             /*只需要加在自己身上，不需要父元素加任何东西，相对于自己刚开始的位置*/
  33.             position: relative;
  34.             left:20px;
  35.             top:20px;
  36.         }
  37.         p:nth-child(3){
  38.             background: yellow;
  39.         }
  40.     </style>
  41. </head>
  42. <body>
  43.     <!--
  44.         是相对于默认位置的相对定位，通过设置 left、top、right、bottom 值可将其移至相对于其正常位置的
  45. 地方（相对于自己的开始的位置发生的位置上的移动，【不会破坏正常的布局流】,不会脱离文档流）
  46.     -->
  47.     <div>
  48.         <p></p>
  49.         <p></p>
  50.         <p></p>
  51.     </div>
  52. </body>
  53. </html>

三、固定定位

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <style>
  9.         *{
  10.             margin:0;
  11.             padding:0;
  12.         }
  13.         .box{
  14.             height:1200px;
  15.             background: pink;
  16.         }
  17.         p{
  18.             width:100px;
  19.             height: 50px;
  20.             background: yellow;
  21.             text-align: center;
  22.             line-height: 50px;
  23.             position: fixed;
  24.             bottom: 20px;
  25.             right:30px;
  26.         }
  27.     </style>
  28. </head>
  29. <body>
  30.     <!--
  31.         相对浏览器的绝对定位，是相对于浏览器窗口的指定坐标进行定位。此元素的位置可通过 "left"、"top"
  32. 、"right" 以及 "bottom" 属性来规定。不论窗口滚动与否，元素都会留在那个位置。脱离文档流；
  33.     -->
  35.     <div class="box"></div>
  36.     <p>返回顶部</p>
  37. </body>
  38. </html>

默认值。位置设置为 static 的元素会正常显示，它始终会处于文档流给予的位置（static 元素会忽略任何 top、bottom、left 或 right 声明）。

不管是定位还是浮动，只要脱离文档流的盒子，他的宽都是内容给撑起来的

四、元素在另一个盒子水平垂直居中

水平垂直居中：

  1.    方式一：<br />        left:50%;<br />         top:50%;<br />         margin-left:-盒子宽度的一半;<br />         margin-top:-盒子高度的一半;
  3.    方式二：<br />         left:0;<br />         top:0;<br />         bottom: 0;<br />         right:0;<br />         margin:auto;