四种定位方式

1.定位：

1.是一种高级的布局方式，通过position属性设置定位

2.可选值：

static 默认值，没有开启定位

开启定位：

relative 开启相对定位

absolute 开启绝对定位

fixed 开启固定定位

sticky 开启黏滞定位

3.每种定位的特点

（1）position:relative;

相对定位的特点，

a:

开启相对定位之后，如果不配合偏移量使用，元素是不会有任何变化的

b:

相对定位的原点是它在文档流中的位置

c:

开启相对定位后，元素层级提高。可以盖住其他元素。

d:

开启相对定位，元素的性质不会发生改变，块还是块，行内还是行内。

e:

元素不会脱离文档流

一般情况下，水平方向的偏移量和垂直方向上的偏移量只用一个值确定，不会同时使用两个值，容易出问题。

（2）position:absolute；

绝对定位的特点：

a:

开启绝对定位后，元素脱离文档流。

b:

元素的性质发生改变，不在区分，块，行内块，行内。

c:

开启绝对定位后，元素的层级也会提高。

d:

绝对点位，如果要要元素的位置发生改变，要配合偏移量去使用。

e:

绝对定位的原点：相对于其包含块来定位的。

一般情况下，我们给子元素设置绝对定位，同时也会给父元素相对定位，叫子绝父相，具体情况具体看。

（3）position: fixed;

固定定位的特点：

a:

脱离文档流，元素层级提高。

b:

元素性质发生改变，不在区分块，行内块，行内。

c:

元素会固定在页面当中，随着滚动条滚动。

d:

元素位置的改变也需要配合偏移量而使用。

e：

固定定位的原点参考根标签（浏览器视口）。

一般情况下，固定定位常用与广告，导航位置。

（4）position:sticky；

黏滞定位的特点：

a:

不会脱离文档流，元素的性质也不会发生改变。

b:

黏制定位要配合top值去使用。在没有到达top值之前，元素随着滚动条而滚动。到达指点的top值之后，元素就会固定不动；

c:

原点是浏览器的视口。（html）

一般使用场景，广告、导航。

偏移量：

left 相对于定位位置左侧的偏移量

right 相对于定位位置右侧的偏移量

top 相对于定位位置上侧的偏移量

bottom 相对于定位位置下侧的偏移量

值可正可负

包含块：

1，在没有定位的情况下就是离当前最近的祖先元素

2，在有定位的情况下，包含块是离他最近，开启了定位的祖先元素，如果他的祖先元素都没有定位，那么包含块就是根元素（html），又叫初始包含。