简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 实例演示绝对定位与固定定位,并分析异同
Blogger Information
Blog 37
fans 0
comment 0
visits 14227
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
实例演示绝对定位与固定定位,并分析异同
秋闲独醉
Original
274 people have browsed it

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

  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

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！