当我第一次学习web开发时，css的风格方面似乎简单而有趣，但执行布局专长似乎是一个令人困惑的混乱。我有点不知道如何定位和花车的工作方式，因此我需要花费数小时才能执行简单的任务。如果这种情况听起来很熟悉，那么本文就适合您。
我早期的一个真正的启示是，当我终于能够围绕定位环境如何工作时，尤其是当它涉及绝对和相对定位之间的差异时。
今天我们将解决这个问题，并确保您确切知道如何以及何时将特定的定位上下文应用于给定元素。
5个不同的位置值
让我们预先解决一些复杂问题。实际上，position属性有五个不同的可能值。我们将在很大程度上跳过继承，因为它非常自我解释（只是继承其父级的值）并且在旧版本的ie中并没有得到很好的支持。
页面上任何元素的默认位置值都是静态的。具有静态定位上下文的任何元素将简单地落在文档流中您期望的位置。这当然完全取决于html的结构。
你毫无疑问看到的另一个价值是固定的。这基本上将一个物体固定在背景上，这样无论你放置它的地方，它都会留在那里。我们经常在侧边栏导航元素上看到这个。向下滚动一长页内容后，回到顶部导航到其他地方是很痛苦的，因此在导航中应用固定位置意味着用户永远不会丢失菜单的网站。单击下面的图像以查看实际操作的实例。
因此，您有三个位置值非常简单，易于理解。最后两个当然是绝对的和相对的。让我们专注于独立解释这些问题，然后看看它们如何一起使用以获得独特的结果。
绝对定位绝对定位允许您从文档的典型流中删除对象，并将其放置在页面上的特定点。为了了解这是如何工作的，让我们设置一个简单的无序项目列表，我们将变成清晰可辨的矩形。
正如我们已经了解到的，默认情况下这些项目将应用静态位置。这意味着它们遵循文档的标准流程，并根据我放在列表中的边距进行定位。现在让我们看看如果我定位其中一个列表项并将一个绝对值应用于position属性会发生什么。
如您所见，第四个列表项已从正常流中完全删除，并放置在浏览器窗口的左上角。请注意，即使有其他内容占据此位置，此元素也不会关心。当某些东西应用了绝对定位时，它既不影响也不受页面正常流中其他元素的影响。
绝对定位的原因是我们可以将这个项目精确定位在我们想要的位置。我们使用顶部，底部，左侧和右侧css属性执行此操作。例如，假设我们希望第四个列表项位于浏览器窗口顶部20个像素和左侧20个像素。
为了证明我们之前关于绝对定位的项目不与其他内容交互的观点，让我们将第四个列表项移到其他列表项的区域中。观看它如何简单地重叠现有内容而不是推动它。单击下面的图像查看并调整此测试的实例。
作为最后一点，请注意第五个清单项目如何占据先前由第四个清单持有的位置而不是保持其位置，就像第四个清单项目仍然存在一样。由于第四个项目已从流程中删除，因此其他所有项目都将相应调整。
相对定位相对定位与绝对定位类似，因为您可以使用顶部，底部，左侧和右侧将对象滑动到页面上的特定点。主要区别是元素的起点或起点。如上所述，通过绝对定位，起点位于浏览器窗口的最左上方。看看我们应用相对定位时会发生什么：
没啥事儿！还是做到了？事实证明，对象现在确实相对定位，但它的起点通常位于文档的流程中，而不是页面的左上角。现在，如果我们应用之前使用的相同的20px调整，结果会大不相同。
这次项目“相对”移动到其起始位置。当你想稍微调整一个对象的位置而不是完全重置它时，这非常有用。请注意，与绝对定位一样，相对定位的对象不关心页面正常低位的其他项目。但是，相对定位元素占据的原始位置没有被下一个列表项占用，就像它使用绝对定位元素一样，而是文档就像第四个项仍然占据该位置一样。
把他们放在一起既然您已经了解绝对和相对定位如何独立工作，那么现在应该深入了解一个更复杂的示例，看看它们如何以真正有用的方式协同工作。这次我们将构建一个漂亮的小演示来展示它是如何工作的。
html从一个带有“照片”类的简单div开始，并在其中放置一个200x200px的图像。这是我们需要的所有html，所以在你得到它之后，转移到一些css。
1
2
3
<div class=“photo”>
<img src=“http://lorempixum.com/200/200/people/9” />
</div>
基本css在css中，首先将体色更改为深色。然后将一些基本样式应用于photo元素，并为其提供一些漂亮的边框和阴影样式。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
body {
background: #222;
}
.photo {
border: 5px solid white;
height: 200px;
width: 200px;
margin: 50px auto;
/*overly complex but cool shadow*/
-webkit-box-shadow: 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);
box-shadow: 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);
}
</pre>
</div>
这是结果图像。这没什么特别的，但它将为我们的定位实验提供一个很好的试验场。
应用胶带假设我们想要创造一种幻觉，即这张照片悬挂在背景中，通过一小条胶带连接起来。为了解决这个问题，我们需要弯曲我们新发现的定位肌肉并利用一些伪元素。
我们要做的第一件事是使用：before伪元素来创建我们的磁带。我们将它的高度设置为20px，宽度为100px，然后将背景设置为白色，不透明度为50％。我将通过添加一个轻微的盒子阴影来完成。
1
2
3
4
5
6
7
8
9
10
.photo:before {
content: “”;
height: 20px;
width: 100px;
background: rgba(255,255,255,0.5);
–webkit–box–shadow: 0px 1px 3px rgba(0,0,0,0.4);
–moz–box–shadow: 0px 1px 3px rgba(0,0,0,0.4);
box–shadow: 0px 1px 3px rgba(0,0,0,0.4);
}
如果我们在此代码之后查看我们页面的实时预览，我们可以看到我们真的搞砸了我们的图像。这条磁带真的干扰了文件的流动。即使它不是真的可见，但它已经将我们的形象从边界突然出现了！
显然，我们在如何定位伪元素时遇到了一些问题。为了解决这个问题，让我们看看如果我们对磁带应用相对定位会发生什么。
1
2
3
4
5
6
7
8
9
10
11
12
13
.photo:before {
content: “”;
height: 20px;
width: 100px;
background: rgba(255,255,255,0.5);
position: relative;
top: 0px;
left: 0px;
–webkit–box–shadow: 0px 1px 3px rgba(0,0,0,0.4);
–moz–box–shadow: 0px 1px 3px rgba(0,0,0,0.4);
box–shadow: 0px 1px 3px rgba(0,0,0,0.4);
}
这是这段代码的效果：
正如你所看到的，我们没有解决我们的问题，一切都像以前一样搞砸了。由于这不起作用，让我们采取相反的路线，看看如果我们使用绝对定位会发生什么。
1
2
3
4
5
6
7
8
9
10
11
12
13
.photo:before {
content: “”;
height: 20px;
width: 100px;
background: rgba(255,255,255