关于position定位的一些理解

定位: 目的-------布局

步骤：

1.第一步：通过position属性设置定位元素相对于谁进行定位（找个参照物）
2.第二步：通过设置left right top bottom属性，确定定位元素距离，参考元素的位置。

优先级：

left>right
top>bottom

position属性值：

1.static(默认值）静态定位，无参照物，不会进行定位，对象遵循标准文档流

2.relative(相对定位)于当前标签没有移动之前的位置为参照物进行定位，不会将对应的标签从文档中脱离出来（不会脱离文档流）同时可通过z-index定义层叠关系。

3.absolute(绝对定位)；已定位父元素为参照进行定位，并且已定位父元素的属性值必须为relative，absolute或者fixed 如果父级标签中没有定位，最终标签会以document为参照进行定位，元素设置absolute之后，会从父元素中脱离出来（脱离文档流），提升层级同时可通过z-index定义层叠关系。

fixed（固定定位）：以浏览器窗口为参照物进行定位，也会让当前元素从文档流中脱离出来（脱离文档流），同时可通过z-index定义层叠关系。

下面先说一下什么是标准文档流：

1.标准文档流定义 在web页面制作，是个"流",文档流指的是元素排版布局过程中元素会自动从左往右，自上而下的流式布局

2.标准文档流的微观现象

1.空白折叠现象：比如：我们如果想让img标签之间没有空隙，必须紧密连接

<img src="img/00.jpg"/><img src="img/02.jpg"/>

2.高矮不齐，底边对齐
3.自动换行，一行写不满，换行写

3.标准文档流等级

标准文档流等级森严，分为两种等级：块级元素和行内元素

块级元素特点：

1.霸占一行，不能与其他任何元素并列

2.能接受宽高设置

3.如果不设置宽度，那么默认宽度将变为父亲的100%，即和父亲一样宽

行内元素特点：

1.与其他行内元素并排

2.不能设置宽高，默认宽度就是文字的宽度

文本级标签：p、span、a、b、i、u、em

容器级标签：div、h系列标签、li、dt、dd

除了p以外，所有文本级标签都是行内元素，所有容器级标签都是块级元素

HTML文档中的元素可以分为两大类：行内元素和块级元素。 1.行内元素，是DOM树中的一个节点。不占据单独的空间，依附于块级元素，行内元素没有自己的区域。

2.块级元素，是DOM树中的一个节点。总是以块的形式表现出来，并且跟同级的兄弟块依次竖直排列，左右自动伸展，直到包含它的元素的边界，在水平方向不能并排。

盒子在标准流中的定位原则： margin控制的是盒子与盒子之间的距离，padding存在于盒子的内部它不涉及与其他盒子之间的关系和相互影响问题，因此要精确控制盒子的位置，就必须对margin有更深入的了解。（1）行内元素之间的水平margin 当两个行内元素紧邻时，它们之间的距离为第一个元素的右margin加上第二元素的左margin。（2）块级元素之间的竖直margin 两个竖直排列的块级元素，它们之间的垂直距离不是上边的第一个元素的下margin和第二个元素的上margin的总和，而是两者中的较大者。这在实际制作网页的时候要特别注意。（3）嵌套盒子之间的margin 这时子块的margin以父块的content为参考进行排列。（4）margin设为负值会使设为负数的块向相反的方向移动，甚至会覆盖在另外的块上 **

4.脱离文档流的方法

css一共有三种方法让一个元素脱离文档流

1.浮动（float）
2.绝对定位（absolute）
3.相对定位（relative）

说完了标准文档流，我们回到关于position定位的问题

- 1.static

默认的position值，无特殊定位，遵循标准文档流

- 2.relative（相对定位）

由上图可见，relative是该对象处于标准文档流中的位置一句left top 进行定位（本例中使用left和top 当然也可以用right bottom ）这些属性并不改变对象原本在文档流中的占位空间

由上图可见，当设置了margin属性时，该对象在标准文档流中的占维空间也随之改变。同理。padding也会改变相对定位的对象在标准文档流的占维空间如下图

- 3.absolute（绝对定位）

由上图可见，绝对定位脱离标准文档流，相对于static定位以外的第一个父元素，使用left，top（或right，bottom进行绝对定位，在使用absolute定位时，必须指定left，top，bottom，right中的至少一个，否则这些属性会使用他们的默认值auto，这将导致对象遵从标准文档流，在前一个对象之后立刻被呈递，简单讲就是都变成relative，会占用文档空间）

如果同时设置了left/right属性那么left生效，同理同时设置了top bottpm ，top生效