Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 相对定位，绝对定位，固定定位的区别与分析
Blogger Information
Blog 19
fans 0
comment 0
visits 10192
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
相对定位，绝对定位，固定定位的区别与分析
搬砖来学php
Original
911 people have browsed it
定位元素
static 默认值没有开启元素定位
relative 开启元素的相对定位
absolute 开启元素的绝对定位
fixed 开启元素的固定定位

1.相对定位

当元素的position属性设置为relative时，则开启了元素的相对定位。
当使用了元素的定位，position改为非static的值时，可以通过left top 两个属性来设置元素的偏移

  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>Document</title>
  8. </head>
  9.  <style>
  10.     .box{
  11.         border:1px solid #000
  12.     }
  13.    .box.parent{
  14.         width: 400px;
  15.         height: 400px;
  16.         background-color: aqua;
  17.     }
  18.     .box.child {
  19.         padding: 20px;
  20.       }
  21.       .box.child.one{
  22.         background-color: lightpink;
  23.       }
  24.       .box.child.two{
  25.         background-color: lightgreen
  26.       }
  27.       .box.child.three{
  28.         background-color: lightseagreen
  29.       }
  31.       .box.child.one{
  32.         position: relative;  /* 当使用了元素的定位，position改为非static的值时，可以通过left top 两个属性来设置元素的偏移 */
  33.         top: 40px;
  34.         left: 50px;
  35.       }
  36.  </style>
  37. <body>  
  39.     <div class="box parent">
  40.         <div class="box child one">相对定位1</div>
  41.         <div class="box child two">绝对定位2</div>
  42.         <div class="box child three">固定定位3</div>
  43.       </div>
  44. </body>
  45. </html>

1.相对定位的元素不会脱离文档流
2.相对定位是相对于元素在文档流中原来的位置进行定位
3.相对定位不会改变元素的性质，块还是块，内联还是内联

2.（绝对定位）当position属性值设置为absolute时，则开启了元素的绝对定位

  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>Document</title>
  8. </head>
  9.  <style>
  10.     .box{
  11.         border:1px solid #000
  12.     }
  13.    .box.parent{
  14.         width: 400px;
  15.         height: 400px;
  16.         background-color: aqua;
  17.     }
  18.     .box.child {
  19.         padding: 20px;
  20.       }
  21.       .box.child.one{
  22.         background-color: lightpink;
  23.       }
  24.       .box.child.two{
  25.         background-color: lightgreen
  26.       }
  27.       .box.child.three{
  28.         background-color: lightseagreen
  29.       }
  31.       .box.child.one{
  32.         position: relative;  /* 1.（相对定位） 当使用了元素的定位，position改为非static的值时，可以通过left top 两个属性来设置元素的偏移 */
  33.         top: 40px;
  34.         left: 50px;
  35.       }
  37.       /* 2.绝对定位 */
  38.       .box.child.two{
  39.         position: absolute;
  40.       }
  41.       .box.parent{
  42.         position: static; /*把child.two的父级 parent自定义定位属性,转为默认定位 */
  43.          position: relative;  /*把父级parent属性开启相对定位 */
  44.       }
  45.       body {
  46.         height: 500px;
  47.         border: 2px solid blue;
  48.       }
  49.       .box.child.two {
  50.         right: 0;
  51.         bottom: 0;
  52.       }
  53.       /* 如果需要定位在body文档里需要先把body当作父级定位 */
  54.       .box.parent {
  55.         /* parent转为非定位元素 */
  56.         position: static;
  57.       }
  58.       body {               
  59.         /* 1.把body 变成可定位元素,当定位父级即可在body里面定位 */
  60.         position: relative;  
  61.       }
  63.       /* 假如我们需要定位在html里面需要把body改为非定位元素 */
  64.       body {
  65.         /* 转为非定位元素 */
  66.         position: static;
  67.       }
  69.       html {    
  70.         height: 600px;
  71.         border: 2px dashed lightseagreen;
  72.       }
  74.       html {
  75.         position: relative;  /*把html改为可定位元素 ，当作Body的父级定位，这个时候就可以定位在html的页面中*/
  76.       }
  80.  </style>
  81. <body>  
  83.     <div class="box parent">
  84.         <div class="box child one">相对定位1</div>
  85.         <div class="box child two">绝对定位2</div>
  86.         <div class="box child three">固定定位3</div>
  87.       </div>
  88. </body>
  89. </html>


1.开启绝对定位，会使元素脱离文档流
2.开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化
3.绝对定位是相对于离他最近的开启了定位的祖先元素进行定位的（一般情况，开启了子元素的绝对定位都会同时开启父元素的相对定位）如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位,代码中显式的层级祖先关系two -> .parent -> body -> html！以上的就是绝对定位

3.固定定位

定定位也是一种绝对定位，它的大部分特点都和绝对定位一样 ，不同的是固定定位永远都会相对于浏览器窗口进行定位 ，固定定位会固定在浏览器窗口某个位置，不会随滚动条滚动，IE6不支持固定定位 

  1. 固定定位的值是fixed
  2. ```html
  3.             /* 3.固定定位，固定定位的值是fixed 和绝对定位相似不同的是：固定定位永远都会相对于浏览器窗口进行定位 
  4.        ，固定定位会固定在浏览器窗口某个位置，不会随滚动条滚动 */
  5.       .box.child.three {
  6.         position: fixed;
  7.         right: 0;
  8.         bottom: 0;
  9.       }
  11.       /*页面滚动 */
  12.       body {
  13.         height: 2000px;
  14.       }

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