画像の上に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;} 

そして、あなたの要件に従って残りのCSSプロパティを変更します。