質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

解決済

positionを使ってるのにimgの高さがそのまま

ayuayuayu
ayuayuayu

総合スコア61

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

2回答

0グッド

0クリップ

273閲覧

投稿2022/10/11 04:59

編集2022/10/11 05:08

positionを使ってるのにimgの高さがなくならず、本来の画像の高さを保ったままです。
普通高さは0になり、次の要素に影響が出ると思うのですがなぜ高さを保てているのかわかりません
どなたか教えて下さい、、、

画像一つ一つにcssを付けているのは違うアニメーションを設定してたからで、今はアニメーションを消した状態です。

<div class="top"> <img class="top-bk"src="img/top.png"> <img class="top1"src="img/top1.png"> <img class="top2"src="img/top2.png"> <img class="top3"src="img/top3.png"> </div> body{ width: 100%; margin: 0 0; } img.top-bk { width: 100%; position:relative; } .top img { width: 100%; } img.top1{ position: absolute; top: 0; left: 0; width:100%; } img.top2{ position: absolute; top: 0; left: 0; width:100%; } img.top3 { position: absolute; top: 0; left: 0; opacity: 1; }

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

int32_t

2022/10/11 05:04

何の高さがなくなるはずなのでしょうか。
ayuayuayu

2022/10/11 05:09

編集しました!画像の高さです。
m.ts10806

2022/10/11 05:17

なぜpositionで高さがなくなると思ったのでしょうか? 根拠や参考にした記事など提示してください。
ayuayuayu

2022/10/11 05:45

position: relativeは高さが0になると間違った覚え方してました、、

回答2

2

  • position: absoluteをつけて高さが0になるのは、内容物のない要素だと思います。
    • 例えば、<div></div>など
  • imgタグは画像という内容物を持っていますので、画像のサイズより小さくなることはないです。
    • 他には例えば、<div>こんにちは</div>は、「こんにちは」という内容物があるので、それより小さくはなりません。
  • absoluteで高さが0になるというよりかは、要素の大きさが内容物のサイズピッタリになる と、解釈されるといいです。
    • なので内容物がないと、幅も高さも0まで縮んでしまいます。

投稿2022/10/11 05:19

編集2022/10/11 05:30
Cocode

総合スコア2129

ayuayuayu, m.ts10806👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

ayuayuayu

2022/10/11 05:45

ありがとうございます。 position: relativeは高さが0になると間違った覚え方してました、、 内容物がないと幅も高さも0まで縮んでしまうんですね、、 理解出来ました! ベストアンサーは先に答えて頂いた方にさせて頂きました。。。 細かく説明して下さりありがとうございました。

0

ベストアンサー

position を指定した要素の高さがなくなる、という挙動はありません。

static relative 以外の値を指定した場合、指定した要素の親が指定要素の領域を確保しなくなるため、親の高さが縮んだり、指定要素に続く要素の位置が前にずれたりします。

質問文のコードの場合、top-bkposition: relative なので、その親の top の高さは top-bk の高さになるでしょう。top-bkposition: absolute なら、top の高さは0になりそうです。

投稿2022/10/11 05:16

編集2022/10/11 05:21
int32_t

総合スコア17111

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

ayuayuayu

2022/10/11 05:37

なるほど!! だからtopの高さが画像の高さになってたんですね! position: relativeは高さが0になると間違った覚え方してました、、 理解出来ました!ありがとうございました。

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。