カード内の図の位置 - 方法？

Question

私はこのような私のカードの石造りの外観を使用しますhttps://codepen.io/daiaiai/pen/VPXGZx

そこに私は画像/図の上にfigcaptions経由でいくつかの情報を追加したいと思います。私はポジション：相対でそれをしようとしたが、それは動作しません。私は負のマージントップを使用しないようにしたいが、私は別の解決策を考えることはできない。どのようにすればよいでしょうか？

codepen上と同じですが、CSSの生の "コード"：

body { 
    margin: 0; background: #131212; 
} 
div#masonry { 
    display: flex; 
    flex-direction: column; 
    flex-wrap: wrap; 
    height: 100vw; 
    max-height: 800px; 
    font-size: 0; 
} 
div#masonry figure { 
    width: 33.3%; 
    transition: .8s opacity; 
} 

figcaption{ 
    position:relative; 
    top:100px; 
    left:50px; 
} 

figure img{ 
    max-width:100%; 
} 

とそのHTMLコードあなたの助けを

<div id="masonry"> 
<figure><figcaption>This girl</figcaption><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/1.jpg"></figure> 
<figure><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/2.jpg"></figure> 
<figure><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/3.jpg"> 
</figure> 
</div> 

ありがとう！

Answer 1

figcaptionが表示されないのは、font-sizeが#masonryに設定されているためです（おそらく、列間のスペースを削除するためです）。

これを修正するにはfont-sizeにfigcaptionを割り当てる必要があります。

どのように配置するかを変更することをおすすめします。

position: relativeからfigureとposition: absoluteからfigcaptionを加算する。

CODEPEN

SNIPPET：

body { 
 
    margin: 0; 
 
    background: #131212; 
 
} 
 
div#masonry { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-wrap: wrap; 
 
    height: 100vw; 
 
    max-height: 800px; 
 
    font-size: 0; 
 
} 
 
div#masonry figure { 
 
    width: 33.3%; 
 
    transition: .8s opacity; 
 
    position: relative; 
 
} 
 
figcaption { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    font-size: 22px; 
 
    width: auto; 
 
    background: black; 
 
    color: white; 
 
} 
 
figure img { 
 
    max-width: 100%; 
 
} 
 
/* fallback for earlier versions of Firefox */ 
 

 
@supports not (flex-wrap: wrap) { 
 
    div#masonry { 
 
    display: block; 
 
    } 
 
    div#masonry img { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    } 
 
}

<div id="masonry"> 
 
    <figure> 
 
    <figcaption>This girl</figcaption> 
 
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/1.jpg"> 
 
    </figure> 
 
    <figure> 
 
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/2.jpg"> 
 
    </figure> 
 
    <figure> 
 
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/3.jpg"> 
 
    </figure> 
 
    <figure> 
 
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/4.jpg"> 
 
    </figure> 
 
    <figure> 
 
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/6.jpg"> 
 
    </figure> 
 
    <figure> 
 
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/8.jpg"> 
 
    </figure> 
 
    <figure> 
 
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/9.jpg"> 
 
    </figure> 
 
    <figure> 
 
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/7.jpg"> 
 
    </figure> 
 
    <figure> 
 
</div>