CSS 定位

定位

普通流

普通流就是 html 文档中的元素如块级元素、行内元素依据他们的显示属性按照在文档中的先后次序依次显示。是块级元素就占一行或多行，是行内元素就和其他元素共处一行。

定位机制

• CSS 有三种基本的定位机制：普通流、浮动和绝对定位。 除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定

定位

• 默认值为 static。可应用于所有元素。 (position）static元素框正常生成：块级元素生成一个矩形框，作为文档流的一部分行内元素则会创建一个或多个行框，置于其父元素中。

相对定位

	position:relative

• 相对定位，如果没有偏移量（left/right/top/bottom）就是正常显示
• 根据原来的位置进行偏移
• 不会使元素脱离文本流

绝对定位

	position:absolute

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

固定定位

	position:fixed

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

粘性定位

	position:sticky

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

z-index

	z-index: 5（优先级）; 一般元素的优先级为1级

• 设置元素的堆叠顺序