定位元素
static	默认值没有开启元素定位
relative	开启元素的相对定位
absolute	开启元素的绝对定位
fixed	开启元素的固定定位

1.相对定位

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 <style>
    .box{
        border:1px solid #000
    }
   .box.parent{
        width: 400px;
        height: 400px;
        background-color: aqua;
    }
    .box.child {
        padding: 20px;
      }
      .box.child.one{
        background-color: lightpink;
      }
      .box.child.two{
        background-color: lightgreen
      }
      .box.child.three{
        background-color: lightseagreen
      }
      .box.child.one{
        position: relative;  /* 当使用了元素的定位，position改为非static的值时，可以通过left top 两个属性来设置元素的偏移 */
        top: 40px;
        left: 50px;
      }
 </style>
<body>  
    <div class="box parent">
        <div class="box child one">相对定位1</div>
        <div class="box child two">绝对定位2</div>
        <div class="box child three">固定定位3</div>
      </div>
</body>
</html>

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 <style>
    .box{
        border:1px solid #000
    }
   .box.parent{
        width: 400px;
        height: 400px;
        background-color: aqua;
    }
    .box.child {
        padding: 20px;
      }
      .box.child.one{
        background-color: lightpink;
      }
      .box.child.two{
        background-color: lightgreen
      }
      .box.child.three{
        background-color: lightseagreen
      }
      .box.child.one{
        position: relative;  /* 1.（相对定位） 当使用了元素的定位，position改为非static的值时，可以通过left top 两个属性来设置元素的偏移 */
        top: 40px;
        left: 50px;
      }
      /* 2.绝对定位 */
      .box.child.two{
        position: absolute;
      }
      .box.parent{
        position: static; /*把child.two的父级 parent自定义定位属性,转为默认定位 */
         position: relative;  /*把父级parent属性开启相对定位 */
      }
      body {
        height: 500px;
        border: 2px solid blue;
      }
      .box.child.two {
        right: 0;
        bottom: 0;
      }
      /* 如果需要定位在body文档里需要先把body当作父级定位 */
      .box.parent {
        /* parent转为非定位元素 */
        position: static;
      }
      body {               
        /* 1.把body 变成可定位元素,当定位父级即可在body里面定位 */
        position: relative;  
      }
      /* 假如我们需要定位在html里面需要把body改为非定位元素 */
      body {
        /* 转为非定位元素 */
        position: static;
      }
      html {    
        height: 600px;
        border: 2px dashed lightseagreen;
      }
      html {
        position: relative;  /*把html改为可定位元素 ，当作Body的父级定位，这个时候就可以定位在html的页面中*/
      }
 </style>
<body>  
    <div class="box parent">
        <div class="box child one">相对定位1</div>
        <div class="box child two">绝对定位2</div>
        <div class="box child three">固定定位3</div>
      </div>
</body>
</html>

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

3.固定定位

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

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

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

1.相对定位

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

3.固定定位

相关文章