DIVの表示効果が間違っているのでしょうか？解決策をお探しですか? _html/css_WEB-ITnose

5c9d0ec5f9e5b98fbc3d8b58cf091338 ;height:200px"/>
bc0cdb7b89719e43894fa5effd077800690584430dd259236aada9b708324864閉じる 5db79b134e9f6b82c0b36e0489ee08ed16b28748ea4df4d9c2150843fecfba68
br />border-right: 1px 単色赤;df250b2156c434f3390392d09b1c9563 16b28748ea4df4d9c2150843fecfba68

画像の上にテキストがあるのはなぜですか?解決策


ディスカッションに返信 (解決策)
あなたのスタイルには margin-top: -40px; があるので、画像に移動

画像の下にテキストを表示させただけです

         <div style="border:1px solid green;margin-top:-200px;">            border-right:1px solid red;<br />border-right:1px solid red;<br />        </div>

は margin- によって作成されています - それが原因ですtop:-200px; で削除すると、テキストが画像の下に表示されます。

マイナス記号を削除するだけです

画像の下のテキスト

ではなく、画像がテキストを覆うようにします

絶対位置を使用して、一方を他方を覆う効果を実現できます。

別の例を示します。01ba41c176e368e8f32a29fcaf9ff0db "test/1169141702.jpg" />

16b28748ea4df4d9c2150843fecfba68

6c6a323d39a0a44b7199dbd16cd61e45

私は小鳥です...

この効果は、2 番目の div の z-index をその値よりも高い値に変更すると得られます。最初の div サイズが大きい場合、テキストは画像の上に表示されます。

margin-top:5px;

Position:absolute;
z-index:100; を使用すると、

画像と画像のタイトルをレイアウトするために特別に使用される新しいタグがあります。 、ちょっとした例をあげましょう

 <figure><img alt="img" src="1.jpg" /><figcaption>Website analytics for October 2010</figcaption></figure>

postion:absolute;z-index:999;/*数值越大越靠上*/