CSS跨越文本覆盖图像问题

Question

我上传了一张图片，但我无法正确定位日期框。正如您所看到的那样，右侧还有一个日期框。我认为很多问题都归因于position: absolute，但如果有办法让它留在div中会很好。任何帮助将不胜感激。

编辑：这是代码。

.event-picture-block { display: inline;}
.event-date-box { position: absolute; margin-top: 300px; margin-left: 2.4%; background-color: white; color: black; font-size: 35px; width: 10%; text-align: center; }
.event-image { width: 33.1%; }

<div class="container">
<% @events.each do |event| %>
<div class="event-picture-block">
  <span class="event-date-box">
    <%= event.date.strftime("%^b %e") %>
  </span>
  <%= link_to event_path(event), class:"link-margin" do %>
    <%= image_tag(event.image.url(:small), :class =>"event-image") %>
  <% end %>
</div>
<% end %>
</div>

谢谢！

Answer 1

尝试添加位置：相对于图片块：

.event-picture-block { display: inline;position:relative;}

根据您的要求更改rest css属性。