Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 相对定位、绝对定位与固定定位的位置偏移演示
Blogger Information
Blog 19
fans 0
comment 0
visits 5710
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
相对定位、绝对定位与固定定位的位置偏移演示
vbokok
Original
307 people have browsed it
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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.   <ul>
  11.     <li class="one">item1</li>
  12.     <li class="two">item2</li>
  13.   </ul>
  14.   <div class="box">box</div>
  15. </body>
  16. </html>
  18. <style>
  19.   * {
  20.     margin: 0;
  21.     padding: 0;
  22.     box-sizing: border-box;
  23.   }
  24.   body {
  25.     border: 5px solid red;
  26.     height: 20em;
  27.   }
  28.   ul {
  29.     border: 5px solid blue;
  30.     height: 14em;
  31.     width: 20em;
  32.   }
  33.   ul li {
  34.     border: 1px solid black;
  35.     list-style: none;
  36.   }
  37.   ul li:first-child {
  38.     background-color: yellow;
  39.   }
  40.   ul li:first-child + * {
  41.     background-color: violet;
  42.   }
  43. ul li.one {
  44.   position: relative;
  45.   top: 10px;
  46.   left: 20px;
  47. }
  48. ul li.two {
  49.   position: absolute;
  50.   height: 200px;
  51.   width: 200px;
  52.   left: 0;
  53.   right: 0;
  54.   top: 0;
  55.   bottom: 0;
  56.   margin: auto auto;
  57. }
  58. .box {
  59.   border: 1px solid darkgreen;
  60.   background-color: greenyellow;
  61.   height: 150px;
  62.   width: 150px;
  63.   position: fixed;
  64.   right: 10px;
  65.   bottom: 10px;
  66. }
  67. </style>

relative:在原始位置上稍偏移位置。
absolute:在附近位置发生元素偏移。
rixed:在HTML块内偏移，不受文档限制

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