position:relative;（标准文档流）

left top

right bottom

1 后写的元素层级更高

改变标准流

   position 决定定位

  static  默认 按照标准流

  relative 相对定位  处于正常的标准流中

  absolute 绝对定位 

{position：relative}相对定位 默认后写的元素大于先写的层级

left ，top，以左上端为原点，向右下移动

例；left：50px

       top：0px

即相对于左端移动50px

2、设置left，top属性时，坐标轴往右是x正方向，往下是y轴正方向，设置right或者bottom的时候，会将对应坐标表轴变成反方向，当设置了right，则往左是x轴正方向，当设置了bottom，则往上是y轴正方向。

relative：相对定位 默认后写的元素大于先写的层级

left ，top，以左上端为原点，向右下移动

例；left：50px

       top：0px

即相对于左端移动50px

设置left，top属性时，坐标轴往右是x正方向，往下是y轴正方向，设置right或者bottom的时候，会将对应坐标表轴变成反方向，当设置了right，则往左是x轴正方向，当设置了bottom，则往上是y轴正方向。======说一个老师没讲出来的更简单的理解，比如设置left:50px，top:50px，翻译过来就是左上，那就以文档流左上角为原点移动50px，如果是right:50px, top:50,翻译过来是右上，那就以文档流的右上角为原点，距离垂交线右边50px,上面50px，即左下各移动50px，其实也可以按照老师说的，当成左边为x轴正方向，下面为y轴正方向，也是左下各移动50px

position可以设置参数如下：

static：默认值，元素按照标准流排列。

relative：相对定位，元素仍是按照标准流排列，但可以使用left、right、top、bottom来改变位置。

absolute：绝对定位，元素脱离正常的文档流，可以通过left、right、top、bottom来改变位置，参照物符元素的定位属性，如果父元素都没有定位属性，则参考窗口定位。注意问题：由于脱离文档流，可能导致容器高度为0；

fixed：固定定位，元素脱离正常的文档流，可以通过left、right、top、bottom来改变位置，固定定位不少限制与父级元素，无论父级元素是否带有定位属性。

inherit：继承，继承父类元素的定位属性。

html中的三种布局方式

1、标准流

2、浮动

3、定位

position（解释：定位、位置）定位属性的意义，通过改变正常的标准流，以非正常的方式迫使元素脱离标准流。

• position（解释：定位、位置）属性决定了元素将如何定位

• 通过top（解释：顶部）、right（解释：右边）、bottom（解释：底部）、left（左边）实现位置

position（解释：定位、位置）中有五个可选的参数

• static是position（解释：定位、位置）中的默认值，元素按照标准流的方式进行正常的排列。

• relative是指相对定位，使用了relative元素让处于正常的文档流中。但是我们可以通过left（左边）、top（解释：顶部）、right（解释：右边）、bottom（解释：底部）来改变元素的位置。

个人中心不显示我的笔记么？？？？

sf ds fd fd f 

后写的元素的层级大于先写的元素的层级，就是新元素的样式会覆盖在旧元素的上面。

position中的五个可选参数

postion中的可选参数

static 标准文档流，默认设置的值

relative 相对于自己原来的位置进行定位

absolute 相对于父类元素（非static）进行定位。父类元素需要是absolute或者relative。

fixed 相对于窗口进行定位。

inherit继承父元素的定位。

relative相对于自己定位；

absolute相对于第一个非statci的父元素定位，没有父元素则相对于窗口，脱离文档流

fixed相对于窗口定位，脱离文档流

relative（相对定位）：可以通过left，right，top，bottom控制位置。

lelf：50px 元素向右移动50px

top：50px元素向下移动50px

right：50px元素向左移动50px

bottom：50px元素向上移动50px

position 属性的意义

position 属性决定了元素将如何定位

通过top，right，bottom，left 实现位置

可选参数：

static（默认的标准流），relative（相对定位），absolute（绝对定位），fixed，inherit。

后面定位元素的层级>>前面元素的层级

position:relative;left;50px;top:50px;

position:relative; right:50px;bottom:50px;

position parameters

1、position决定了元素将如何定位

      - 通过top、right、bottom、left实现位置

2、position:relative;

        后写的元素层级大于先写的元素层级

当position：relative；left，top时以网页右端为x轴正方向，以 网页下端为y轴正方向

当position：relative；right，bottom时以网页左端为x轴正方向，以网页上端为y轴正方向

position决定了元素将如何定位

- 通过top、right、bottom、left实现位置

static是默认值，元素按照标准流正常排列

relative：相对定位，通过left、top、right、bottom来改变元素的位置

position中的可选参数

    static

    reative

    adsolute