实例演示绝对定位与固定定位,并分析异同

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <title>实例演示绝对定位与固定定位,并分析异同</title>
  5.     <meta charset="UTF-8" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1" />
  7.     <link href="css/style.css" rel="stylesheet" />
  8.     <style>
  9.       * {
  10.         margin: 0;
  11.         padding: 0;
  12.       }
  13.       body {
  14.         height: 1000px;
  15.         width: 400px;
  16.         /* background-color: rgba(255, 0, 0, 0.4); */
  17.         position: absolute;
  18.         border: 2px solid red;
  19.       }
  20.       /* 绝对位置指的是该无素相对于上级(非static)的位置 */
  21.       /* 这里是相对于body的位置 */
  22.       div.absolute {
  23.         width: 100px;
  24.         height: 50px;
  25.         background-color: green;
  26.         position: absolute;
  27.         right: 0;
  28.         bottom: 0;
  29.       }
  30.       /* 固定位置是指该元素相对于视口的位置， */
  31.       /* 且固定位置不会随着滚动条滑动变化 */
  32.       div.fixed {
  33.         width: 100px;
  34.         height: 50px;
  35.         background-color: orange;
  36.         position: fixed;
  37.         right: 0;
  38.         top: -2px;
  39.       }
  40.     </style>
  41.   </head>
  42.   <body>
  43.     <div class="absolute">这是一个绝对定位</div>
  44.     <div class="fixed">这是一个固定定位</div>
  45.   </body>
  46. </html>

absolute and fixed