position用法

position 是 CSS (Cascading Style Sheets) 的一个关键属性，定义了元素的定位方式，用于控制元素在文档流中的布局方式。

position 属性的5个值：

static： 默认值。元素按照正常的文档流进行布局。

top、right、bottom、left 和 z-index 属性对 static 定位的元素不起作用。

relative：元素首先按照正常文档流进行布局。该关键字下，元素仍然占据在文档流中的空间，以从原位置移动，原位置空白。position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。

absolute：元素会被移出正常文档流，并不为元素预留空间，并相对于其最近的已定位（非 static）祖先元素进行定位。如果没有这样的祖先元素，则相对于文档的初始包含块（通常是视口或页面的根元素）进行定位。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。

fixed：元素会被移出正常文档流，并不为元素预留空间，并相对于浏览器窗口进行定位。即使页面滚动，元素也会保持在固定的位置。这通常用于创建固定在页面上的元素，如导航栏或广告。

sticky：元素根据用户的滚动位置在文档流中进行定位。在到达某个特定位置之前，元素的行为类似于 relative 定位；一旦达到该位置（通过 top、right、bottom、left 中的一个属性指定），元素的行为就会类似于 fixed 定位，即使页面滚动也会保持在那个位置。

 top、right、bottom、left 属性指定元素的确切位置。

z-index 属性可以与 position 属性一起使用，以控制堆叠顺序（即哪个元素位于另一个元素之上）。z-index 仅对定位元素（非static ）有效

正常文档流：

将窗体自上而下分成一行一行，块级元素独占一行， 行内元素在每行中按从左至右的顺序依次排放元素，当超过父布局最大宽度后自动换行。

块级元素：

<div>、<p>、<h1>、

<ol>、 <ul>、<li>、

<header>, <footer>, <section>, <article>, <aside>

<table>、

<hr>：水平线

行内元素：

<span>

<a>：超链接

<img class="img">：display: block; 使.img元素以块级元素的形式显示。

<strong>, <em>, <b>, <i>：用于表示文本样式的元素，如粗体、斜体等。

<br>：换行

<label>：标签元素，用于定义<input>元素的标签。

<input>, <select>, <textarea>, <button>：表单控件元素，虽然它们的行为和布局方式可能看起来更像块级元素，但根据HTML规范，它们实际上是行内元素（或行内块级元素）。

flex用法