CSS position详解。还不会用定位？看完你就懂了。

CSS position详解。还不会用定位？看完你就懂了。

CSS中定位经常使用来：

1.正常状况下能够覆盖在另外一个元素上

2.能够移动一个元素的位置

3.能够固定某个容器在浏览器窗口的某个位置不动

4.能够作吸顶效果

CSS定位方式共有五种：

position: static;静态（默认）定位

position:relative;相对定位

position:absolute;绝对定位

position:fixed;固定定位

position:sticky;粘性定位

static 默认值

默认定位方式

relative 相对定位

1.文档流

不脱离文档流 仍然占据浏览器位置

2.参照物

相对于初始位置，移动位置以后原来的空间还在。

3.层叠顺序

多个元素给了相对定位以后，若是没有移动位置，他们就不会覆盖，若是移动 了后面的会覆盖前面的 ，能够用z-index改变。

在box中添加一个子容器box2

给子容器添加相对定位

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

能够看出box2相对于原来的位置的左边和上边都是50px；

absolute 绝对定位

1.文档流

脱离文档流

下面的元素若是没有定位则会上去，文字也会被覆盖（全脱离）

浮动也是脱离文档流，可是下面容器的文字环绕显示（半脱离）

若是多个元素给了绝对定位，结构顺序靠后的在上面

2.移动参照物

定位以后想要移动位置，能够用margin 或者left right bottom top

参照物是浏览器

若是父容器有定位，则参照物是父容器

3.层叠顺序

z-index属性 默认是0 改变定位以后的层叠顺序

在box中添加一个子容器box2

直接给子容器添加绝对定位后

position: absolute;
top: 50px;
right: 50px;

因为box2的没有父容器有定位，所以参照物变为浏览器窗口，能够看到如今box2距离窗口右侧50px，顶部50px;
再给父容器添加定位后

position: relative;

此时的bo2x父容器有了定位方式所以box2相对于父容器定位，定位在了距离父容器右边和上面50px的位置

fixed 固定定位

1.文档流

脱离文档流 可是会固定在某一位置不动

多个元素同时给定了固定定位，结构上后面的元素会盖在最上面

2.参照物

参照物是浏览器的当前窗口

3.层叠顺序

固定定位的层叠顺序也能够用z-index改变

在box中添加一个子容器box2

给子容器添加固定定位

position: fixed;
top: 50px;
right: 50px;

此时不管是否父容器有定位方式，box2都会相对于窗口定位，所以他定位到了距离浏览器右侧和上面50px的位置

此时咱们将滚动条向下拉

画面总体上移，box2仍保持相对于窗口不动

sticky 粘性定位 CSS3新属性

1.文档流

脱离文档流 最开始是固定在一个位置不动至关于绝对定位

当到了给定的位置以后变成固定定位

2.参照物

浏览器的当前窗口

3.层叠顺序

多个元素同时给定了粘性定位，结构上后面的元素会盖在最上面

粘性定位的层叠顺序也能够用z-index改变

在网页中添加一个子容器box2

给box2添加粘性定位

position: sticky;
top: 50px;

此时看上去box2没有发生任何变化
滑动滚动条

滑动滚动条，刚开始box2会跟着网页一块儿上移，当box2到指定位置以后就会相对于浏览器窗口固定

若是给box2添加父容器 虽会触发绝对定位，可是box2没法脱离父容器

继续往下滑动，父容器因为没有定位，会上移，同时也会把box2带上去

总结：

当遇到单独修改一个元素的位置而且使其余元素不受其移动影响的时候使用相对定位。 当遇到使某个元素在一个区域里浮动在其余元素上面使用绝对定位。 绝对定位和相对定位的区别是绝对定位能够脱离文档，不占据文档位置，相对定位虽然能够盖在其余元素上面，可是在其原位置仍然会占据空间。 当须要一个元素不管什么时候都固定在窗口的一个位置的时候使用固定定位，好比提示框。 当遇到须要一个元素移动必定范围以后固定在窗口不动的状况使用粘性定位，好比某些顶部的吸顶效果，右边的回到顶部或者联系客服效果。 逆战班 SpongeBooob