Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 定位和五环
Blogger Information
Blog 19
fans 0
comment 1
visits 14104
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
825 people have browsed it

定位 的本质

  1. 定位属性 position 定位类型分为 静态定位（static） 相对定位(relative);绝对定位(absolute);固定定位(fixed)；

  2. 静态定位：position: static 默认的，也就是文档流定位，元素的显示位置与源码顺序一致。

  3. 相对定位： position relative; 相对该元素在文档流的原始位置进行偏移。占用原先的位置来进行定位。

  4. 绝对定位： position absolute;相对于它的祖先中离它最近的”定位元素”的位置发生偏移。会脱离文档流。

  5. 定位元素：只要这个元素中有position: relative;或者position：absolute;就称为定位元素。position:static 不是定位元素。

利用绝对定位做的五环

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>浮动</title>
  8.     <style>
  9.         * {
  10.             padding: 0;
  11.             margin: 0;
  12.             box-sizing: border-box;
  13.         }
  15.         .box {
  16.             width: 20em;
  17.             height: 20em;
  18.             border: burlywood solid 2em;
  19.             border-radius: 50%;
  20.             position: absolute;
  21.         }
  23.         .box:first-of-type {
  24.             border: #0000ff solid 2em;
  25.         }
  27.         .box:nth-of-type(2) {
  28.             border: #000 solid 2em;
  29.             left: 20em;
  30.         }
  32.         .box:nth-of-type(3) {
  33.             border: #df0808 solid 2em;
  34.             left: 40em;
  35.         }
  37.         .box:nth-last-of-type(2) {
  38.             border: hsl(59, 100%, 50%) solid 2em;
  39.             left: 10em;
  40.             top: 10em;
  41.         }
  43.         .box:nth-last-of-type(1) {
  44.             border: rgb(94, 255, 0) solid 2em;
  45.             left: 30em;
  46.             top: 10em;
  47.         }
  48.     </style>
  49. </head>
  51. <body>
  52.     <div class="box"></div>
  53.     <div class="box"></div>
  54.     <div class="box"></div>
  55.     <div class="box"></div>
  56.     <div class="box"></div>
  57. </body>
  59. </html>
  • 显示效果
Correcting teacher：天蓬老师天蓬老师

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