CSS定位

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

提示：这里可以添加本文要记录的大概内容：

例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、流的概念

1. 文档流是相对于盒子模型讲的
2. 文本流是相对于文字段落讲的
3. 元素浮动之后，会让它跳出文档流，也就是说当它后面还有元素时，其他元素会无视它所占据了的区域，直接在
   它身下布局。但是文字却会认同浮动元素所占据的区域， 围绕它布局，也就是没有脱出文本流。 但是绝对定位
   后，不仅元素盒子会脱出文档流，文字也会脱 出文本流。 那么后面元素的文本就不会再认同它的区域位置，会
   直接在它后面布局，不会再环绕。 当然你可以使用 z-index 来让底部的元素到上面来，类似于一个图层的概念。

二、CSS定位

1. CSS 定位属性允许对元素进行定位改变其在页面的位置。
2. CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
3. 普通流中的元素的位置由元素在 HTML 中的位置决定。

二、相对定位

left：向右移动（左边与原先间隔固定值）
right：向左移动
top：向下移动
bottom：向上移动 值可为负，为负时向相反方向移动

三、绝对定位

绝对定位:盒子可以在浏览器中以坐标进行位置精准描述，拥有自己的绝对位置。
代码如下（示例）：

position:absolute
top:50%;
margin-top:自己高度的一半

四、固定定位

固定定位:不管页面如何滚动，他都永远固定在那里。

position:fixed;
top:100px;
left:100px;

用途:“返回顶部”,“楼层导航”。

五、粘性定位

粘性定位:偏移量同相对定位，页面滚动时，滚动到顶部，直接与顶部贴靠。

position:sticky;