Question

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

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

每当图像位置发生变化时，我都不想继续更新点的left和top位置。

（注意：请不要担心.box1和.box2 css。实际代码有图片。）

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

Answer 1

使用position: absolute在CSS中定位元素时，它会引用位置值为absolute，relative或fixed的最近父级。如果示例为position和.box1，请更新红点所在的父容器的.box2。

由于您希望容器右下角的红点使用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>

Answer 2

如果我对你的理解是正确的。这是您要实现的输出。在这里，我使用float将div放在左边。然后将box1和box2声明为＆＃34; position：relative＆＃34;这样我就可以在应用css样式时控制其中的两个图像＆＃34; position：absolute＆＃34;

＆＃13;

.box1    {  
  width:65px;
  height:40px;
  box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
  border-bottom:2px solid #fff;
  border-right:2px solid #fff;
  float: left;
  position: relative;
}

.box2 {
  width:65px;
  height:40px;
  box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
  float: left;
  position: relative;
}

.image-active {
  width: 8px;
 	height: 8px;
 	background-color: red;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  position: absolute;
  left: 70%;
  top: 42%;
 }

＆＃13;

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

＆＃13;

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

2 个答案: