前端--css定位

定位

1、普通流
普通流就是 html 文档中的元素如块级元素、行内元素依据他们的显
示属性按照在文档中的先后次序依次显示。是块级元素就占一行或多
行，是行内元素就和其他元素共处一行
普通流 position： static 默认是按照普通流顺序排列（上左下右）

2、定位机制

1、定位机制
CSS 有三种基本的定位机制：普通流、浮动和绝对定位。 除非专门
指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的
位置由元素在HTML 中的位置决定。
2、定位
默认值为 static。可应用于所有元素。 (position:static) static
元素框正常生成：块级元素生成一个矩形框，作为文档流的一部分，
行内元素则会创建一个或多个行框，置于其父元素中

3、相对定位

2、position：relative 相对定位 没有脱离文档流，也不脱离文本流
（1）、当没有偏移量时，原来位置不变
（2）、相对定位根据原来自身位置定位

绝对定位

position：absolute：
1.如果使用绝对定位，有定位祖先元素就相对于定位祖先元素发生偏 移，没有定位祖先元素就会相对于整个文档发生偏移（绝对 相对 固 定）
2.使元素脱离文档流和文本流

固定定位

position:fixed
1.相对于整个窗口进行定位，不会受滚动条影响
2.使元素脱离文档流和文本流

粘性定位

position：sticky：(这是 css3 新增的属性值)粘性定位。最初会被当作是
relative，相对于原来的位置进行偏移；一旦超过一定阈值之后，会 被当成 fixed 定位，相对于视口进行定位
当没达到偏移量时是相对定位，达到偏移量是固定定位

使用条件：

1、父元素不能 overflow:hidden 或者 overflow:auto 属性。 2、必须指定
top、bottom、left、right4 个值之一，否则只会处于相对定位 3、父元素的高度不能低于 sticky
元素的高度4、sticky 元素仅在其父元素内生效