css - 我认为基本的 css 但仍然无法做到 - 试图将两个 div 定位在另一个 div 中

Question

已经为此工作了大约两个小时。我想做这个：

看起来像这样：

这是我的代码。我一直在尝试使用 padding-bottom、margin-bottom 等，但它只是在问号 div (area_help) 下方添加像素，将下面的 div 向下推——而不是像我希望的那样在 your_area 中定位 area_help。任何帮助，将不胜感激。谢谢！

html/erb 文件（这是一个 rails 应用程序，但不要认为这很重要）：

 <div id="your_area">
  <div id = "Address_book_area">
    <% if current_resource.name == @resource.name %>
    <%= "Your Area:" %>
    <% else %>
      <% if @resource.is_company? %>
        <%= "#{@resource.name}" + "'s Area:" %>
      <% else %>
        <%= "#{@resource.first_name.capitalize}" + " " + "#{@resource.last_name.capitalize}" + "'s Area:" %>
      <% end %>
    <% end %>
  </div>


    <div id = "area_help">
      <%= image_tag("why_fb_log_in.png") %>
    </div>
  </div>

CSS：

#your_area {
margin-top: 100px;
margin-left: 240px;
margin-bottom: 20px;

#Address_book_area {
font-size: 28px;
width: 140px;
float: left;
}

#area_help {
width: 30px;
display: inline-block;
}

}

Answer 1

这看起来像是相对定位合理的情况：

#area_help {
  position: relative; 
  top: -15px
 }

相对定位将移动元素，但保持文档流不变。