CSS定位不仅仅是X，Y坐标
CSS定位一直是创建网站布局的重要部分。 即使随着Flexbox和CSS Grid等新的CSS布局技术的兴起，定位在任何网页设计师的一揽子技巧中仍占有重要地位。
在使用CSS定位时，您需要做的第一件事就是建立CSS属性来告诉浏览器您是否要为给定元素使用绝对定位或相对定位。 您还需要清楚地了解这两个定位属性之间的差异。
虽然绝对和相对是网页设计中最常用的两个CSS位置属性，但position属性实际上有四个状态：
- 静态的
- 绝对
- 相对的
- 固定
静态是网页上任何元素的默认位置。 如果你没有定义元素的位置，它将是静态的。 这意味着它将根据它在HTML文档中的位置显示在屏幕上，以及它如何在该文档的正常流程内显示。
如果将顶部或左侧的定位规则应用于具有静态位置的元素，则这些规则将被忽略，并且该元素将保留在正常文档流中出现的位置。 事实上，如果有的话，您很少需要将元素设置为CSS中的静态位置，因为这是默认值。
绝对CSS定位
绝对定位可能是最容易理解的CSS位置。 你从这个CSS位置属性开始：
位置：绝对;该值告诉浏览器，无论将要放置什么，都应该从文档的正常流程中移除，而不是放在页面上的确切位置。 这是根据该元素最接近的非静态定位祖先来计算的。
由于绝对定位的元素不在文档的正常流程中，因此不会影响HTML之前或之后的元素在网页上的位置。
举个例子 - 如果你有一个使用相对值定位的分区（我们很快就会看到这个值），并且在该分区内有一个段，你想从分区顶部放置50个像素，你会在该“段落”属性上添加一个“绝对”的位置值以及50px的偏移值，像这样。
位置：绝对; 顶部：50px;这个绝对定位的元素将始终显示距相对定位区域顶部50个像素，而不管正常流程中显示的是什么。 你的“绝对”定位元素使用相对定位的元素作为其上下文，你使用的定位值是相对的。
您可以使用的四个定位属性是：
- 最佳
- 对
- 底部
- 剩下
您可以使用顶部或底部（因为无法根据这两个值定位元素）以及右侧或左侧。
如果一个元素被设置为绝对位置，但是它没有非静态定位的祖先，那么它将相对于身体元素进行定位，该元素是页面的最高级元素。
相对定位
我们已经提到了相对定位，现在我们来看看这个属性。
相对定位使用与绝对定位相同的四个定位属性，但不是将元素的位置基于其最接近的非静态定位的祖先，而是从元素所在的位置开始，如果它仍处于正常流动中。
例如，如果您的网页上有三个段落，并且第三个段落上放置了“位置：相对”样式，则位置将根据其当前位置进行偏移。
第1段
第2段
Paragraph 3。
在上面的例子中，第三段将位于容器元素左侧2em处，但仍然在前两段之下。 它将保持在文档的正常流程中，只是稍微抵消。 如果您将其更改为position：absolute; 之后的任何内容都会显示在它的顶部，因为它不再处于文档的正常流程中。
网页上的元素通常用于设置位置值：相对于没有建立偏移值的值，这意味着元素保持其在正常流中出现的位置。 这完全是为了将该元素确定为可以绝对定位其他元素的上下文。 例如，如果您的整个网站上有一个部门，其类别值为“容器”（这是网页设计中非常常见的场景），则可以将该部门设置为相对位置，以便其内部的任何内容都可以使用它作为一个定位上下文。
固定定位怎么样？
固定定位很像绝对定位。 元素的位置与绝对模型的计算方式相同，但固定元素随后固定在该位置 - 几乎就像水印一样 。 然后页面上的所有其他内容将滚过该元素。
要使用此属性值，您可以设置：
位置：固定;请记住，当您在网站上修复某个元素时，它将在您的网页打印出来时在该位置进行打印。 例如，如果您的元素固定在页面顶部，则它会出现在每个打印页面的顶部 - 因为它固定在页面的顶部。 您可以使用媒体类型来更改打印页面显示固定元素的方式：
@media screen {h1＃first {position：fixed; }} @media print {h1＃first {position：static; }}Jennifer Krynin的原创文章。 1/7/16由Jeremy Girard编辑。