How to place an image on top of text?

Question

the top attribute appears not to be working on a html. I am trying to use the top attribute on image to move an image to the top and place above a text but the top attribute of a css never moves the image Here is snippet

<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

here are the css rules

.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;
}

Please how can push the image to the top using this attribute style="top: 4.4538em;" is a challenge

Answer 1

Your element does have the top attribute applied. This can be seen in the following:

.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>

If you are not seeing this effect, it is possible you have a rule with higher specificity overriding it, or you have cached the style before you applied this rule.

It's also worth noting that top only works on a positioned element. You need to have position: relative, position: absolute or similar on .stl-04 in order to position it with top.

Alternatively, you may be looking for margin-top, which positions vertically based on the containing element.

As an aside, basing margins off of font sizes (with em units) is generally bad practice; you should really use fixed units instead (preferably not going to so many decimal places).