ASCII码 ASCII码

相对定位，绝对定位，固定定位的区别与分析

发布于：2022-07-13 13:31:26  栏目：技术文档
定位元素
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.       }

相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行