html - 定位元件

Question

我尝试了多种方法，但没有定位<img>在所需的位置。它总是卡在两个跨度之间。试图从孩子中取出 imgdiv并将其添加到父 div 中。但没有运气。我想将它定位在我的跨度下方并使用padding-top:20px;.This 图像是 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 所在的位置。