CSS定位

CSS定位

CSS定位是用来控制元素在页面上的位置和排列方式的技术。CSS有三种基本的定位机制：普通流、浮动流、定位流，其中定位流包括相对定位、绝对定位和固定定位。以下是CSS定位的总结：

• 普通流：元素默认从上至下或者从左至右的排列顺序。
• 浮动流：添加了浮动的元素。
• 定位流：添加了定位的元素，包括相对定位、绝对定位和固定定位。

相对定位 position:relative

1.当没有偏移量时，原来位置不变
2.没有脱离文档流，没有脱离文本流
3.相对定位是相对于原来的位置定位

绝对定位position:absolute

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

固定定位position：fixed

1.既脱离文档流，又脱离文本流
2.永远根据窗口的位置定位

粘性定位position：sticky

1）不会脱离文档流，它是一种专门用于窗口滚动时的新的定位方式。
2）最常用的值是 top
3）粘性定位和相对定位的特点基本一致，不同的是:粘性定位可以在元素到达某个位置时将其固定。