html - 根据图像的当前位置设置图像样式

Question

我有一个矩形图像，点击它后我需要在它的右下角添加一个小圆圈。请查看codepen example.

图像的位置会根据设置的某些条件不断变化。一旦图像的位置发生变化，我就需要点也相应地移动。

我不想在图像位置发生变化时不断更新点的 left 和 top 位置。

(注意:请不要担心 .box1 和 .box2 的 css。实际代码有图像。)

我只需要确保点与图像的当前位置对齐。请告知是否可以通过 css 技巧。

Answer 1

当在 CSS 中使用 position: absolute 定位元素时，它会引用最近的位置值为 absolute、relative 或 的父元素>固定。在您的示例 .box1 和 .box2 的情况下，更新红点所在父容器的 position。

因为您想要容器右下角的红点，请使用 right 和 bottom 属性代替 left 和 top 。

以下是带有建议修改的示例:

.box1    {  
  width:65px;
  height:40px;
  /* Added position */
  position: relative; 
  box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
  border-bottom:2px solid #fff;
  border-right:2px solid #fff;
}

.box2 {
  width:65px;
  height:40px;
  box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
  position: absolute;
  left:100px;
  right: 0;
  bottom: 0;
  top: 5px;
}

.image-active {
  width: 8px;
  height: 8px;
  background-color: red;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  position: absolute;
  /* replace left & top properties */
  right: 0;
  bottom: 0;
 }

<div class="box1">
  <div class="image-active"></div>
</div>  
  
<div class="box2">
  <div class="image-active"></div>
</div>