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

<div id="adver" style="border:1px ソリッドブルー;width:150px ;height:200px"> ;height:200px"/>
<div style="margin-top:- 40px;margin-left:130px;cursor:pointer;"><a href="#">閉じる </a></div>
br />border-right: 1px 単色赤;<br /> </div>

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


ディスカッションに返信 (解決策)
あなたのスタイルには 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; で削除すると、テキストが画像の下に表示されます。

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

画像の下のテキスト

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

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

別の例を示します。<div style="position:absolute;width:200px;height:115px;z-index:2;left: 152px;top: 61px;"> "test/1169141702.jpg" />

</div>

<div style="position:absolute;width:200px;height:115px;z-index:1;left:266px;top:90px;" >

私は小鳥です...

</div>
この効果は、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;/*数值越大越靠上*/

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。