Css五种定位之间的区别

##CSS 定位机制##

CSS 有三种基本的定位机制：普通流、浮动流和定位流。

除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。

块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。

行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。

##什么是CSS 定位 (Position) ？##

属性允许你检索和设置对象的定位方式

CSS 为定位提供了一些属性值，可以将布局的一部分与另一部分重叠。

定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

##CSS 定位都有哪几种以及之间的区别 ？##

1、static 默认值

相当于普通流；没有定位；

作用：可以用于取消元素之前的定位设置

2、relative 相对定位

元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

参照物：自己所在的位置

特点：

a：如果没有定位偏移量，对于元素本身没有任何影响

b：不使元素脱离文档流，空间是会被保留的

c：不影响其他元素布局

d：left，top，right，bottom是相对于当前自身进行便宜的，不能独立存在，必须配合定位使用

 

3、absolute 绝对定位

元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

参照物：

a：可视窗口：浏览器第一屏（默认情况下）

b：有设置定位的最近父元素

特点：

a：使元素完全脱离文档流

b：使内联元素支持宽高（让内联元素具备块特性）

c：使块元素默认宽根据内容决定（让块具备内联的特性）

d：如果有定位祖先元素相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移（绝对、相对、固定）

注：如果祖先元素中有多个元素具备定位模式，那么是已离自己最近的祖先元素进行偏移。

 

案例：图片上叠加说明文字 

<div class="father">
    <img src="pic.jpg" />
    <div class="son">图片上的文字说明</div>
</div>

.father{
    positon: relative;
 }
.son {
    position: absolute;
    bottom：0px;
    left:0px;
    width:100%;
    background:rgba(0,0,0,0.5);
    color:#ffffff;
}

案例效果：

4、fixed 固定定位

元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

参照物：

a：始终都是相对于整个浏览器窗口进行固定定位

特点：

a：使文档完全脱离文档流

b：使内联元素支持宽高（让内联具备内联块的特性）

c：使块元素默认宽根据内二公决定（让块具备内联块的特性）

d：相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响，不会受到祖先元素的影响。

案例：点击出现弹，位置水平垂直居中且固定不动

<div class="popup">
    <div class="pop_body">...</div>
</div>

.popup{
    width:300px;
    height:400px
    position: fixed;
    left:50%;
    top:50%
    margin-left:-150px;
    margin-top:-200px;
}

案例效果：

5、粘性定位 position：sticky；（css3新增属性，兼容性比较差）

这是一个结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位，适用于一些特殊场景。

 参照物：

a：在固定的时候：参照物是相对于整个浏览器窗口

 特点：

a：相对定位和固定定位的结合体；

b：在没有到达指定位置的时候，是没有定位效果的（相当于相对定位）；在到达设定的位置的时候 是固定定位；

c：在固定的时候：参照物是相对于整个浏览器窗口

生效规则：

position:sticky 的生效是有一定的限制的，总结如下：

a、须指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

b、设定为 position:sticky 元素的任意父节点的 overflow 属性必须是 visible，否则 position:sticky 不会生效。这里需要解释一下：

· 如果 position:sticky 元素的任意父节点定位设置为 overflow:hidden，则父容器无法进行滚动，所以 position:sticky 元素也不会有滚动然后固定的情况。

· 如果 position:sticky 元素的任意父节点定位设置为 position:relative | absolute | fixed，则元素相对父元素进行定位，而不会相对 viewprot 定位。

c、达到设定的阀值。这个还算好理解，也就是设定了 position:sticky 的元素表现为 relative 还是 fixed 是根据元素是否达到设定了的阈值决定的。

案例：实现导航的吸顶效果（头部导航条固定）

#toolbar {
  position: -webkit-sticky; /* safari 浏览器 */
  position: sticky; /* 其他浏览器 */
  top: 100px;
}

案例效果：（初始效果）

案例效果：（滑动之后效果）

##定位的作用##

a、在正常情况下，可以让一个元素覆盖在另外一个元素上面

b、可以移动一个元素的位置

c、可以固定某个容器在浏览器窗口的某个位置不动。

d、可以做吸顶效果，比如百度新闻的导航

##相对定位和绝对定位的区别##

a、 相对定位的参照物是自己本身所在的位置，

绝对定位的参照物是包含块

b、 相对定位是不会脱离文档流的，而且不对页面布局产生影响；

绝对定位是会脱离文档流的，原来的位置不在占有，后面的内容会把位置补上去

##绝对定位和固定定位之间的相同点和不同点##

相同点：

都会脱离文档流，并且都定位之后，结构在后面的元素会覆盖在最上面，都可以通过z-index来改变层叠顺序，也可以都用left top right bottom移动位置

不同点：

a、参照物不同

绝对定位的参照物有2个，A是浏览器的第一屏 B就是有定位的父元素

固定定位的参照物只有1个，是浏览器的当前窗口。

b、固定定位之后该元素就固定在某个位置了，拖动窗口的时候，不再改变

##层叠顺序z-index##

检索或设置对象的层叠顺序

注：他只针对于定位属性的元素起作用

a：auto 自动，默认的

b：number 数值越大，层越上

没有设置z-index时，最后写的对象优先级先显示在上层，设置之后，数值越大，层越上

##包含块的概念##

a、包含块是绝对定位的基础，包含块就是为定位元素提供坐标，偏移和显示范围的参照 物，即确定绝对定位的偏移起点和百分比 长度的参考；

b、绝对定位元素会根据包含块进行绝对定位，

默认情况下 ，浏览器的可视窗口是一个大的包含块，

默认情况下，绝对定位元素会相对浏览器的可视窗口进行定位；

如果他的祖先级元素定义了包含块，那他就最近的祖先级元素进行绝对定位。

c、怎么给他的祖先级元素定义成包含块： 给祖先级元素添加position：relative/absolute/fixed。