画像の上にfigcaptionを置く方法

Question

imgの下にfigcaptionを置いて画像の上に来て、画像が透明になるようにしようとしています。

残念ながら、私は彼らと同じ幅（なぜ全く分からない）にするか、画像の上にfigcaptionを置くことはできません。ネガティブなmargin-topを使用すると、画像の下に隠れるだけです。

私はz-indexを試しましたが、それ以外は私が考えることはできますが、これまでのところ運はありません。ここで が私のコードです：仕事にz-indexについては

.floatImage { 
 
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.4); 
 
    margin: 15px; 
 
    margin-right: 0px; 
 
    z-index: -1; 
 
    width: 100%; 
 
} 
 

 
figure { 
 
    width: 25%; 
 
    float: right; 
 
} 
 

 
figcaption { 
 
    background-color: rgba(79, 44, 16, 0.6); 
 
    height: 1.2em; 
 
    width: 100%; 
 
    margin-top: -2.4em; 
 
    float: right; 
 
    text-align: center; 
 
    color: white; 
 
    z-index: 1; 
 
    font-family: 'Open Sans', sans; 
 
}

<figure> 
 
    <img class="floatImage" src="img.png"> 
 
    <figcaption>Placeholder caption</figcaption> 
 
</figure>

Answer 1

1. 、elmentはrelativeまたはabsoluteのような、非静的な位置を持っている必要があります。

2. 幅の一貫性を保つためfloatImageから

結果の余白を削除します。

.floatImage { 
 
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.4); 
 
    z-index: -1; 
 
    position: relative; 
 
    width: 100%; 
 
} 
 

 
figure { 
 
    width: 25%; 
 
    float: right; 
 
} 
 

 
figcaption { 
 
    background-color: rgba(79, 44, 16, 0.6); 
 
    height: 1.2em; 
 
    width: 100%; 
 
    margin-top: -2.4em; 
 
    float: right; 
 
    text-align: center; 
 
    color: white; 
 
    z-index: 1; 
 
    font-family: 'Open Sans', sans; 
 
}

<figure> 
 
    <img class="floatImage" src="http://placehold.it/300x400"> 
 
    <figcaption>Placeholder caption</figcaption> 
 
</figure>

jsFiddle：https://jsfiddle.net/hey1ppd2/