DIV_html/css_WEB-ITnose への z-index の追加について質問する

div z-index

最近問題が発生しました。まずは次のコードをご覧ください。
4bad9cbe49e5422a15ec09faeec9c04616b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
in は、z-index を使用して画像の上にテキストを追加する効果です。高さを指定すると、その後の画像要素がブロックされます。
outに高さを付ければ正常に表示できるのですが、絵がたくさんあるのでoutには様々な高さが必要なので高さを与えることができません…
表現が分かりやすいか分かりませんが、専門家が解決してくれることを願っています


ディスカッションに返信 (解決策)

img 背後にある要素をブロックする これは非科学的です。次の .in 設定 location:absolute;top:0;left:0;

<style>.out{position:relative;}.out .in{position:absolute;top:0;left:0;z-index:1;font-size:30px;background-color:rgba(255,0,0,.3);color:#fff;}</style><div class="out">	<img src="http://img.china.alibaba.com/images/trade/other/091231/test1.jpg" width="100" alt="" />	<div class="in">cover</div></div><div class="out bd">	<img src="http://img.china.alibaba.com/images/trade/other/091231/test2.jpg" width="200" alt="" />	<div class="in">cover</div></div>

img は次の要素をブロックしますが、これは非科学的です。次の.in設定position:absolute;top:0;left:0;

<style>.out{position:relative;}.out .in{position:absolute;top:0;left:0;z-index:1;font-size:30px;background-color:rgba(255,0,0,.3);color:#fff;}</style><div class="out">	<img src="http://img.china.alibaba.com/images/trade/other/091231/test1.jpg" width="100" alt="" />	<div class="in">cover</div></div><div class="out bd">	<img src="http://img.china.alibaba.com/images/trade/other/091231/test2.jpg" width="200" alt="" />	<div class="in">cover</div></div>

imgタグにpositionとz-indexも追加したため、親divが存在しないことがわかりました。追加されていないときの高さ、開きます、ありがとう〜

たくさんのポイント、ありがとう。