ASCII码 ASCII码

绝对定位与固定定位

发布于：2022-07-13 12:38:26  栏目：技术文档

绝对定位与固定定位

效果图如下：

代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>绝对定位和固定定位</title>
  8. </head>
  9. <body>
  10.     <div class="text">
  11.         <div class="item1">
  12.             绝对定位： position:absolute
  13.         </div>
  14.         <div class="item2">
  15.             固定定位:position:fixed;
  16.         </div>
  17.     </div>
  18.     <style>
  19.         .text{
  20.             width: 500px;
  21.             height: 1600px;
  22.             background-color: bisque;
  23.             position: relative;
  24.         }
  25.         /* 绝对定位，参照祖先级的定位 */
  26.         .item1{
  27.             height: 50px;
  28.             position: absolute;
  29.             right:0;
  30.             top: 0;
  31.             background-color: lightblue;
  32.         }
  33.         /* 固定定位是绝对定位的特例，起始位置参照视口 */
  34.         .item2{
  35.             height: 50px;
  36.             position: fixed;
  37.             left: 0;
  38.             top: 0;
  39.             background-color: lightgreen;
  40.         }
  41.     </style>
  42. </body>
  43. </html>
相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行