如何将图像放置在文本之上？

Question

顶部属性似乎不适用于 html。我正在尝试使用图像上的顶部属性将图像移动到顶部并放置在文本上方，但是 css 的顶部属性从不移动图像这里是 sn-p

<div class="stl_02">
            <div class="stl_03">
                <img src="" 
                alt=""style="top: 4.4538em;" class="stl_04">
            </div>
            <div class="stl_view">
                <div class="stl_05 stl_06">
//other texts here

这里是css规则

.stl_02 {
    height: 46em;
    font-size: 1em;
    margin: 0em;
    line-height: 0.0em;
    display: block;
    border-style: none;
    width: 51em;
}
.stl_03 {
    position: relative;
}
.stl_04 {
    width: 100%;
    clip: rect(-0.041667em,51.04167em,66.04166em,-0.041667em);
    position: absolute;
    pointer-events: none;
}

请问如何使用该属性将图像推到顶部 style="top: 4.4538em;"是一个挑战

Answer 1

您的元素确实应用了top 属性。这可以在下面看到：

.stl_02 {
  height: 46em;
  font-size: 1em;
  margin: 0em;
  line-height: 0.0em;
  display: block;
  border-style: none;
  width: 51em;
}

.stl_03 {
  position: relative;
}

.stl_04 {
  width: 100%;
  clip: rect(-0.041667em, 51.04167em, 66.04166em, -0.041667em);
  position: absolute;
  pointer-events: none;
}

<div class="stl_02">
  <div class="stl_03">
    <img src="http://placehold.it/100" alt="" style="top: 4.4538em;" class="stl_04">
  </div>
  <div class="stl_view">
    <div class="stl_05 stl_06">
    </div>
  </div>
</div>

如果您没有看到此效果，则可能是您有一个具有更高特异性的规则覆盖它，或者您在应用此规则之前已经缓存了样式。

还值得注意的是，top 仅适用于 定位 元素。您需要在.stl-04 上拥有position: relative、position: absolute 或类似名称，以便将其与top 一起定位。

或者，您可能正在寻找margin-top，它根据包含元素垂直定位。

顺便说一句，基于字体大小的边距（使用em 单位）通常是不好的做法；您应该真正使用固定单位（最好不要使用那么多小数位）。