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表示＆＃34;我将为您提供top / right / ...值，并希望该元素从移动该数量通常会发生的地方。＆＃34;

你几乎总是想要使用position: absolute，这基本上意味着选择父母的边界（具体：第一个不是position: static的父母是默认的）并移动它我用top / right /..."定义的元素。（有更多的含义，例如absolute从文档流中删除元素，但目前超出了范围。）

这意味着您必须

定位您的容器不是静态的。 position: relative在这里工作得很好，因为如果你没有指定top / ......，它就不会改变元素。
使用position: absolute定位您的商品，因为它们将相对于其容器定义（与原始位置无关，与position: relative相同）。

您的示例看起来像

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

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中，并且可以重复使用该类，而不会使多个磁带图像实例混乱HTML。

Answer 3

尝试使用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

如何正确使用“position：relative”？

3 个答案: