CSS定位

一、概述及相对定位

定位：
position：relative（相对） absolute（绝对） static（无定位） fixed（固定）

文档流：从上往下，从左到右

relative：相对于该元素以前所在的位置
一般不作为元素单独显示出来，而是作为容器进行一种包含，做为父元素使用
position:relative
top:20px;
left:20px;

二、绝对定位

相对定位：不会使元素脱离文档流，元素初始位置占据的空间会保留
相对定位和绝对定位的区别：初始位置是否保留

绝对定位：相对于最近的祖先元素，如果没有，就相对于body
产生浮动效果

三、相对定位和绝对定位

当样式中含有position时候top和left才能有效果

浮动和绝对定位的相同点：

1. 都是漂起来的元素，也就是离开了原来的位置。

2. 不占据原来的位置。

3. 宽度会发生变化，比如：h1标签的文字宽度，默认只设height的情况下，它的width是铺满父元素的宽度的，而当浮动或绝对定位后，它的宽度就是h1内文字的宽度。

不同点：

1. 使用float(浮动)后，它后面的元素，会占据它原来的位置，但是后面元素的的文字图片等不会被它挡住，也就是不会出现重叠现象

2. position:absolute绝对定位后，它后面的元素，会占据它原来的位置，但是后面的元素，直接在它的左上角开始显示，会出现重叠现象

父元素中设置相对或绝对之后，子元素中不设置都会跟随父元素移动.
  但是标准流还是会根据父元素的高度进行排列。（因为设置的高度是绝对的，即使实际显示高度已经超过设置的高度。也可以理解为超出高度的显示效果并没有在当前文档流中）
父一级div如果设置了高度，那么他的高度便是固定的，不会被子div里面的高度撑起来，反之如果没有设置高度，就会被子div撑起来。
  当设置了父div高度为100，而里面又有三个子div，高度分别为100，子div的内容就会溢出展示呐，这里同学可以上面的例子中，设置div0的overflow: hidden;属性来查看效果呐。

四、定位和浮动

1、绝对定位和浮动

float浮动，文档流的其他内容不会忽略float的位置（会识别出来），因此不会遮盖字体；//floaat跳出了文档流，但没有跳出文本流所以不会覆盖文本

绝对定位，其内容则会被文档流的其他内容忽略，因而产生的浮动会遮盖字体

2、相对定位和浮动

相对定位和浮动可以一起使用，在float控制浮动方向且不遮盖字体的情况下，由相对定位的设置来改变模块的偏移距离。
只有定义了相对定位，在使用top时才可以生效；

同时设置position与float时的页面渲染效果：
1）当设置position: absolute和float时，float属性会失效，最终表现出来的只有position: absolute的效果
2）当设置position: relative和float时，相当于先进行浮动，然后在浮动的基础上进行相对定位。

五、z-index的使用

z-index改变层级顺序。z-index:数字；数字大的在上，小的在下。数字最好以整倍数设置：z-index:300; z-index:200; z-index:100;
z-index的值设置不可以太小，因为在一个大的布局当中很可能需要插入一层或者多层的层叠关系，因此设置的稍微大一些能够方便值的设定。

六、固定定位

定位
层叠模式z-index
position relative absolute fixed static

relative 相对 参照物是元素以前的位置再进行偏移 一般用作包裹 不破坏文档流

absolute 绝对 以父级定位为参照物，元素body 脱离文档流 会看到浮动效果

相对与绝对的区别
绝对 重叠效果
相对 一列

绝对定位与浮动
1.区别
绝对会重叠遮挡
浮动并不会
共同点：破坏文档流
2.同时使用绝对和浮动
不会被重叠
相对与浮动结合，各能展示特别相对：边距

z-index 绝对div先后顺序
大在前
小在后
列如：z-index:2;

固定定位 fixed
相对于浏览窗口进行定位
拖动滚动条时在wed中的显示 位置不变

.