absolute 当其父元素不具有定位属性，则以窗口为定位

html可以分为两大元素

1、块级元素（div、h1-h6标题、有序无序列表「ol、ul、li」、table表格、p段落、···）

区别：独占一行。

2、内联元素（a超链接、span文字、img图片、input控件、）

区别：内联元素和相邻内联元素在同一行，如果一行内宽度不够时才会被挤到另一行去。

这两种元素的排列方式呢，是在没有特殊属性的干扰下，在正常的标准流中所表现出来的正常特性。

现在网站为了让游客先注册登录，使用这个方法：

1、搞一个遮罩层（多数是半透明灰）为固定定位，置于网页界面上方

2、再一个登录界面小窗口，设置固定定位，置于遮罩层上方，且居中。

3、这样用户就一定会点击这个登录窗口了，不论他怎样调整这个浏览器窗口的大小，登录界面一直位于你的视窗的最中间。

relative相对于自己原来的位置进行相对定位 absolute相对于最近的父级元素进行定位 fixed始终相对于浏览器窗口进行对位 顺便说一下，fixed就是特殊的absolute absolute绝对定位，相对于最近的已经定位（position为absolute或者relative的元素）的祖先元素 如果没有就一直往上找，直到body即相对当前窗口定位 以窗口四个边为标准定位 relative相对定位，相对于本元素原始位置进行定位 一般来说是左上顶点

absolute/relative受制于父元素 fixed：不受制于父元素

设置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（解释：底部）来改变元素的位置。

postion中的可选参数

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

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

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

fixed 相对于窗口进行定位。

inherit继承父元素的定位。

绝对定位 absolute  当参数是left（数值越大，元素位置水平越向右。）和top时  元素以网页左上角为原点 由左向右 由上至下移动；当参数是right和bottom时， 网页以右上角为原点 元素由右向左 由上至下移动；当参数是left和bottom时，元素以网页左下角为原点，从左向右，从下到上移动；当参数是right和bottom是，元素以右下角为原点，从右向左 从下到上移动。  相对定位 relative  则是始终以网页左上角为原点，随着参数改变做以上移动。

position定位absolute使其脱离了标准文档流，标准文档流中已没有这个div，HTML高度为0

明年

后写的position层级大于先写的

标准流:按元素的特性，不做其他修改。

1、position:relative; 相对定位 原先的位置不会被后面的元素占用

（1）若设置了top和left的值，则它以它的父元素的（若没有父元素就以它自己的）左上角为原点，向右向下为x轴、y轴的正方向，移动相应的距离

（2）若设置了top和right的值，则它以它的父元素的（若没有父元素就以它自己的）右上角为原点，向左向下为x轴、y轴的正方向，移动相应的距离

（3）若设置成负值，则原点不变，正方向变为相反的方向

以此类推……

2、position:absolute; 绝对定位 原先的位置会被释放，然后被后面的元素占用

（1）若设置了top和left的值，则它以它的最近的定位了的父元素的（否则以当前可视浏览器窗口的）左上角为原点，向右向下为x轴、y轴的正方向，移动相应的距离

（2）若设置了top和right的值，则它以它的最近的定位了的父元素的（否则以当前可视浏览器窗口的）右上角为原点，向左向下为x轴、y轴的正方向，移动相应的距离

（3）若设置成负值，则原点不变，正方向变为相反的方向

以此类推……

（4）若以浏览器窗口的右下角为原点，且bottom设置为负值时，则它会向浏览器下方移动，这时可能会移动到浏览器的下一屏