コミュニティ
学ぶ
ツールライブラリ
AIツール
レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > DIVの表示効果が間違っているのでしょうか？解決策をお探しですか? _html/css_WEB-ITnose

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
リリース： 2016-06-21 09:39:28
オリジナル
1037 人が閲覧しました


;height:200px"/>

br />border-right: 1px 単色赤;


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


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

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


画像の下のテキスト

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

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

別の例を示します。

"test/1169141702.jpg" />

私は小鳥です...


この効果は、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;/*数值越大越靠上*/
ログイン後にコピー

関連ラベル：
DIV中的显示效果不对？求解？
ソース：php.cn
前の記事：HTML_html/css_WEB-ITnoseの名前とIDについて 次の記事：FF の Select のコードと表示が矛盾するのはなぜですか?_html/css_WEB-ITnose
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
ページが突然 CSS またはブートストラップを取得できなくなります それで、私はページを開発しています。昨日その一部を実行してうまくいきました。そして今日は残りの作業を続けましたが、すべてがうまくいきました。通常の HTML ページとして開こうとす...
から 2024-04-06 21:58:04
0
1
800
0ms スリープを省略すると CSS トランジションが中断されるのはなぜですか? FLIP アニメーションを実装して、正しく理解できているかどうかを確認しようとしています。このコードペン (間違ったコードですみません。ただいじっているだけです) で、sleep ...
から 2024-04-06 16:29:50
0
2
490
ページのメインディスプレイに画像を表示するにはどうすればよいですか? 私がやりたいのは、NASAAPI を使用して写真を受信することです。これらの写真は、マイページのサムネイルとメインディスプレイに表示されます。コードがサムネイルから画像を取得してペ...
から 2024-04-06 15:33:12
0
1
433
React Three Fiber: スクロール イベントが遅れるのはなぜですか? ReactThreeFiber には、カメラのズーム全体にわたって保持したいスプライトを生成する React コンポーネントがあります。アルゴリズムは機能しているようですが (サイ...
から 2024-04-06 13:39:24
0
1
410
ASP クラシック コードを文字列として MYSQL データベースに保存する可能性 ASP クラシック コードを MySQL データベースに保存し、プルされたときにコードを実行させることは可能ですか?たとえば、変数名を文字列に保存し、それを表示する前に ASP を...
から 2024-04-06 13:38:43
0
1
358
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート