html - 位置決め要素

Question

複数のことを試しましたが<img>、希望の位置に配置できませんでした。それは常に2つのスパンの間に挟まれています。子からimgを実行し、divそれを親divに追加しようとしました。しかし、運はありません。スパンの下に配置したいのですが、padding-top:20px;この画像は200x38pxの画像です。これが私のコードです：

HTML

<div class="col1-step2">
          <div class="heading-step2">
            <span class="heading-step2">Hello signed User.</span>
            <span class="heading-step2 textblue">How are you doing.</span>
            <img class="user-bar" src="<?php echo site_url('img/bar.png'); ?>">
          </div>
</div>

CSS

.col1-step2 {
  float: left;
  width: 40%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);

}
div.heading-step2 {
  top: 6%;
  position: relative;
}

.heading-step2 {
  font-size: 24px;
  color: #f7f7f7;
}
.heading-step2 .textblue {
  color: #55c7fa;
  font-weight: bold; 
  display: block;
}
img.user-bar {
  position: absolute;
  padding-top: 25%;
}

Answer 1

相対的なポジショニングと絶対的なポジショニングが混在しています。画像上の絶対位置を削除し、HTMLを再構築することで、さまざまな要素の順序を取得できます。

http://jsfiddle.net/HhbQB/1/

<div class="col1-step2">
    <div class="heading-step2">
        <span class="heading-step2">Hello signed User.</span>
        <img class="user-bar" src="http://placehold.it/200x100" />
        <span class="heading-step2 textblue">How are you doing.</span>    
    </div>
</div>

あなたのコメントに応じてフィドルを更新しました：http：//jsfiddle.net/HhbQB/2/

Answer 2

divに相対位置または絶対位置を指定できます。ヘルプが必要な場合は、divを配置する場所を指定してみてください。