当div本身被翻译时，翻译div的孩子

Question

我有一个html元素

<div class="mycluster" style="margin-left: -22px; margin-top: -22px; width: 44px; height: 44px; transform: translate3d(383px, 217px, 0px); z-index: 217;">
  35
</div>

这是由我正在使用的javascript库生成的。对于样式，它基本上是地图上的蓝色标记，文本顶部显示“35”。我遇到的问题是标记中的“35”太高，所以我需要使用translateY()将其翻译下来，但这会被div translate3d()覆盖。

我尝试使用

.mycluster:first-child {
  transform: translateY(100px);
}

和

div.mycluster > div:first-child {
  transform: translateY(100px);
}

但都没有奏效。我无法改变元素最初的呈现方式。

修改 这是一个图像，我想垂直居中标记中的数字。

Answer 1

您可以使用定位：

进行此操作

.mycluster {
  background: blue;
}

.mycluster > span {
  position: relative; /* positioned relative to its normal position */
  top: 100px; /* moved down by 100px */
  background: red;
}

<div class="mycluster" style="margin-left: -22px; margin-top: -22px; width: 44px; height: 44px; transform: translate3d(383px, 217px, 0px); z-index: 217;">
  <span>35</span>
</div>