CSS定位一直是创建网站布局的重要部分。即使随着CSS布局技术（如Flexbox和CSS Grid）的兴起，定位仍然在任何网页设计师的技巧包中都占有重要地位。
使用CSS定位时，首先需要确定位置的CSS属性，告诉浏览器是否要对给定元素使用绝对定位或相对定位。您还需要了解这两个定位属性之间的区别。
虽然绝对和相对是Web设计中最常用的两个CSS位置属性，但position属性实际上有四种状态：
- 静态的
- 绝对
- 相对的
- 固定
静态定位
静态是网页上任何元素的默认位置。如果未定义元素的位置，则它是静态的，这意味着它将根据HTML文档中的位置以及它在该文档的正常流程中的显示方式显示在屏幕上。
如果您应用定位规则，例如 最佳 要么 剩下 对于具有静态位置的元素，将忽略这些规则，并且该元素保留在正常文档流中出现的位置。您很少（如果有的话）需要在CSS中将元素设置为静态位置，因为它是默认值。
绝对CSS定位
绝对定位可能是最容易理解的CSS位置。你从这个CSS position属性开始：
位置：绝对;
此值告诉浏览器应该从文档的正常流中删除要放置的内容，而是将其放在页面上的确切位置。这是基于该元素最接近的非静态定位祖先计算的。因为绝对定位的元素从文档的正常流中取出，所以它确实会影响HTML之前或之后的元素在网页上的位置。 例如，如果你有一个使用相对值并在该分区内定位的分区，你有一个段落要从分区顶部定位50个像素，你添加一个位置值 绝对 到那个段落以及偏移值 50像素 在…上 最佳 财产，像这样： 位置：绝对;上：50px;
这个绝对定位的元素总是显示距离相对定位的分区顶部50个像素，无论在正常流程中还有什么显示。绝对定位的元素使用相对定位的元素作为其上下文，并且您使用的定位值与此相关。 您可以使用的四个定位属性是： 你可以使用其中之一 最佳 要么 底部 - 因为元素不能根据这两个值定位 - 或者任何一个 对 要么 剩下. 如果元素设置为绝对位置，但它没有非静态定位的祖先，则它相对于body元素定位，body元素是页面的最高级元素。 相对定位使用与绝对定位相同的四个定位属性，但不是将元素的位置基于其最接近的非静态定位的祖先，而是从元素将在何处仍然处于正常流中时开始。 例如，如果您的网页上有三个段落，而第三个段落有一个 职位：亲属 放置在它上面的样式，它的位置根据其当前位置偏移。 第1段。 第2段。 第3段。 在上面的示例中，第三个段落位于容器元素左侧的2em处，但仍位于前两个段落的下方。它保留在文档的正常流程中并略微偏移。如果你改成它 位置：绝对，它后面的任何内容都显示在它上面，因为它不再在文档的正常流程中。 网页上的元素通常用于设置值 职位：亲属 没有建立偏移值，这意味着元素保持在正常流程中的正确位置。这样做只是为了将该元素建立为绝对可以定位其他元素的上下文。例如，如果您的整个网站周围有一个类值为 容器，这是网页设计中的常见场景，可以将划分设置为 相对的 所以它内部的任何东西都可以用它作为定位上下文。 固定定位很像绝对定位。元素的位置以与绝对模型相同的方式计算，但固定元素然后固定在该位置 - 几乎像水印。然后页面上的其他所有内容都会滚过该元素。 要使用此属性值，请设置： 位置：固定;
请注意，当您在网站上修复元素时，它会在您打印网页时在该位置打印。例如，如果您的元素固定在页面顶部，它将显示在每个打印页面的顶部，因为它固定在页面顶部。您可以使用媒体类型来更改打印页面显示固定元素的方式： @media screen { h1＃first {position：fixed; } } @media print { h1＃first {position：static; } }
相对定位
怎么样固定定位？
