CSS叠加img在同一地方

Question

我在CSS中有一些圆圈，我想在圆圈上放置一个“贴纸”。但是我想让贴纸在每个圆圈的同一地方都是一样的，我怎么能做到呢？

看到红色的圆圈，那是贴纸。

​

现在我有了贴纸的CSS，如：

.icon {
    position : absolute;
    bottom : -5%;
    right : 30%;
}

但这是行不通的，因为每个圆圈的大小都可能不同。所以贴纸站在不同地方的每个圆圈上.

这是一个JSFiddle

Answer 1

我就是这样做的。对不应该是静态的值使用百分比值，并在圆圈大小变化时进行更改。

​

.big {
  width: 200px;
  height:200px;
}
.small {
  height:150px;
  width:150px;
}
.smallest {
  height:100px;
  width:100px;
}

.circleBig {
  border-radius: 50%;
  background:black;
  display: block;
  width:100%;
  height:100%;
}
.circleSmall {
  border-radius: 50%;
  background:red;
  display: block;
  width:60px;
  height:60px;
  float: right;
  margin-top: 65%;
  margin-right: -15px;
}

<div class="big">
  <div class="circleBig">
    <div class="circleSmall">
    </div>
  </div>
</div>

<div class="small">
  <div class="circleBig">
    <div class="circleSmall">
    </div>
  </div>
</div>

<div class="smallest">
  <div class="circleBig">
    <div class="circleSmall">
    </div>
  </div>
</div>

​

Answer 2

让您的<div class="icon">占您的外部容器的百分比(使用calc，稍微偏移一些以说明非常小的大小)，并将其放置在底部: 0，右: 0。

您可能必须调整最终值，但类似的内容应该会给您提供一个非常可伸缩的解决方案，因为它总是根据父容器的百分比来调整偏移量：

.circle-out .icon {
    position: absolute;
    bottom: 0;
    right: 0;
    width: calc(25px + 22%);
    height: calc(25px + 22%);
}

这是一个改良小提琴。这种方法的优点是它是动态的，不需要基于外圈大小的多个声明，所以如果需要在中间再创建50个圆圈大小(甚至有一个可调整大小的圆圈)，那么仍然只需要一个类。