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

Question

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;
	
}

Comments

[int32_t]

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

[ayuayuayu]

編集しました！画像の高さです。

[m.ts10806]

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

[ayuayuayu]

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

Answer 1

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

Comments

[ayuayuayu]

ありがとうございます。
position: relativeは高さが0になると間違った覚え方してました、、
内容物がないと幅も高さも0まで縮んでしまうんですね、、
理解出来ました!

ベストアンサーは先に答えて頂いた方にさせて頂きました。。。
細かく説明して下さりありがとうございました。

Answer 2

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

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

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

Comments

[ayuayuayu]

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