如何在我的案例中正确使用 "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; 在我的主图片上放一些 "tape thingies" 但到目前为止我失败了。

谁能指出我做错了什么？

Answer 1

尝试使用 position: absolute; 而不是 position: relative;

.container #one{
    position: absolute;
    top: 10px;
    left:20px;
}

.container #two{
    position: absolute;
    top: 10px;
    left:215px;

    transform: rotate(90deg);
}

Demo here

Answer 2

你在应该使用 position:absolute 的时候使用了 position:relative。

body {
  background: gray;
}
.container {
  margin-left: 20px;
  margin-top: 20px;
  width: 200px;
  height: 200px;
  background: navy;
  position: relative;
}
.container #one {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-25%, -25%)
}
.container #two {
  position: absolute;
  top: 0;
  left: 100%;
  transform: translate(-75%, -25%) 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>

就是说，我根本不希望 HTML 中有演示图片。所以我会使用相同的技术来使用伪元素。

body {
  background: gray;
}
.container {
  margin-left: 20px;
  margin-top: 20px;
  width: 200px;
  height: 200px;
  background: navy;
  position: relative;
}
.container::before {
  position: absolute;
  content: '';
  width: 20px;
  height: 20px;
  background-image: url(http://fenrir.info.uaic.ro/~elena.chiosa/img/scoci.png);
  top: 0;
  left: 0;
  transform: translate(-25%, -25%);
  z-index: 1;
}
.container::after {
  position: absolute;
  content: '';
  width: 20px;
  height: 20px;
  background-image: url(http://fenrir.info.uaic.ro/~elena.chiosa/img/scoci.png);
  top: 0;
  left: 100%;
  transform: translate(-75%, -25%) rotate(90deg);
}

<div class="container">
  <img src="http://www.animal-photography.com/thumbs/blue_eyed_white_long_hair_cat_~AP-G3KLBP-TH.jpg" />
</div>

这样，演示部分现在位于 CSS 中，并且 class 可以重复使用，而不会出现磁带图像的多个实例使您的 HTML 混乱。

Answer 3

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

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

position: relative 表示 "I'll give you top/right/... values and want that the element is moved by that amount from where it would occur normally."

你几乎总是想使用 position: absolute，这基本上意味着 "pick the boundaries of the parent (being specific: the first parent that is not position: static which is the default) and move this element to what I define with top/right/..."。（还有更多含义，例如 absolute 从文档流中删除元素，但目前超出范围。）

这意味着你必须

定位您的容器非静态。 position: relative 在这里工作正常，因为如果您不指定 top/... 它不会改变元素。
使用 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>

如何在我的案例中正确使用 "position: relative"？

How to use "position: relative" properly in my case?

html

css

css-position