top 属性似乎不适用于 html。我正在尝试使用图像上的 top 属性将图像移动到顶部并放置在文本上方,但 css 的 top 属性从不移动图像这是片段
<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;"是一个挑战
最佳答案
您的元素确实有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
仅适用于 positioned 元素。你需要在 .STL-04
上有 position: relative
, position: absolute
或类似的,以便用 top< 定位它
。
或者,您可能正在寻找 margin-top
,它基于包含元素垂直定位。
顺便说一句,根据字体大小(使用 em
单位)设置边距通常是不好的做法;你真的应该使用固定单位(最好不要使用这么多小数位)。
关于html - 如何将图像放在文本之上?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53822105/