html - 在我的情况下如何正确使用 "position: relative"？

Question

在长时间休息后，我最近再次开始编码，现在我正在努力找出我做错了什么。

我在这里做了一个 JSFiddle:http://jsfiddle.net/mtsgp3gg/

这是我想看到的输出:http://puu.sh/jwi3d/233c917986.png

我有一个包含 3 个图像的容器:

<div class="container">
   <img src="main picture">
   <img id="tape left" src="">
   <img id="tape right" src="">
</div>

我想使用 position: relative; 在我的主图片上放一些小“胶带东西”和top:0;但到目前为止我失败了。

谁能指出我做错了什么吗？

Answer 1

css position: 有点令人困惑，尤其是在开始时(几乎 99% 的时间都被误用了)。

您使用 position:relative 因为您希望它相对于容器，对吗？虽然这是显而易见的行为，但这不是 css 所做的。

position:relative 表示“我会给你 top/right/... 值，并希望元素移动正常情况下发生的金额。”

您几乎总是想使用 position:absolute 这基本上意味着“选择父级的边界(具体来说:第一个不是 position: static 的父级)是默认值)并将此元素移动到我用 top/right/... 定义的位置。 (还有更多的含义，例如 absolute 从文档流中删除元素，但这超出了目前的范围。)

这意味着你必须

1. 放置容器不是静态的。 position:relative 在这里工作得很好，因为如果您不指定 top/... ，它不会改变元素。
2. 使用 position:absolute 定位您的元素，因为它们将相对于其容器进行定义(而不是相对于其原始位置，因为它们将使用 position:relative )。

你的例子看起来像

body {
    background: gray;
}

.container {
    position: relative;
    margin-left: 20px;
    margin-top: 20px; 
    width: 200px;
    height: 200px;
    background: navy;
}

.container [id] {
    position: absolute;
    top: -5px;
}

.container #one {
    left: -5px;
}

.container #two {
    right: -5px;
    transform: rotate(90deg);
}

<div class="container">
    <img src="http://www.animal-photography.com/thumbs/blue_eyed_white_long_hair_cat_~AP-G3KLBP-TH.jpg">
    <img id="one" src="http://fenrir.info.uaic.ro/~elena.chiosa/img/scoci.png">
    <img id="two" src="http://fenrir.info.uaic.ro/~elena.chiosa/img/scoci.png">
</div>