画像にdivを挿入するにはどうすればよいですか？

Question

私は画像上にdivを置いて、キャプションのように、画像の上に直接置くようにしています。

キャプションが他の時間より長くなることがあるので、キャプションの高さがより長いことがあるため、特定のmargin-top：-pxを設定できません。

私はこれを試してみましたが、リンク（黒）の背景は、私がちょうど述べたものように、表示されません、キャプションの高さはので、このメソッドはゴミである変更：

<div> 

    <img src = "<? echo $image_url ?>" style="float:left;min-width:220px;max-width:220px;"> 
    <a href="LINK" ><div style="width:210px;background-color:black;color:white;bottom:0;margin-top:-20px;padding-left:10px;padding-top:10px;font-size:16px;"><? echo $title ?></div></a> 

</div> 

Answer 1

でstyle="position:relative;"を追加するには、何かを試してみてくださいこのように：

<div style="position:relative;"> 

    <img src = "<? echo $image_url ?>" style="min-width:220px;max-width:220px;"> 
    <div style="position:absolute;width:210px;background-color:black;color:white;top:0;left:0;padding-left:10px;padding-top:10px;font-size:16px;z-index:5;"><a href="LINK" ><? echo $title ?></a></div> 

</div> 

あなたはいくつかのことがありました：
1） 'a'タグの中にdivがありました。ブロックレベルの要素（divのような）をインラインレベルの要素（aのようなもの）の中に入れてはいけません。
2）イメージからフロートを削除し、外側のdivの位置をrelativeに、内側のdivの位置を絶対に設定し、絶対にdivの上部に配置します。そこから、内側のdivに0より大きいzインデックスを追加して、画像の上にスタックされた状態になるようにします。

Answer 2

使用CSSのz-indexプロパティに画像の上にテキストを配置します。 zインデックスの高い要素が上部に表示されます。

Answer 3

このコードは、あなたが何をしようとしてのために働く必要があります。

<div style="background: transparent url('<? echo $image_url ?>') no-repeat 0 0; padding: 10px 0 10px 10px; width: 200px;"><a href="LINK"><? echo $title ?></a></div> 

Answer 4

現在のdivにposition:absolute; left:0px;top:0px;z-index: 2;を追加し、親のdiv

<div style="position:relative;"> 

    <img src = "<? echo $image_url ?>" style="float:left;min-width:220px;max-width:220px;"> 

<a href="LINK" ><div style="position:absolute;z-index: 2;left:0px;top:0px;width:210px;background-color:black;color:white;bottom:0;padding-left:10px;padding-top:10px;font-size:16px;"><? echo $title ?></div></a>