positionのbottom:0が効かない？top:autoで初期化しよう

positionプロパティにbottom:0を設定してるのに効かないの。

どうしたらいい？

同じclass要素にtop:0などのプロパティを設定していませんか？

先に「top:auto;」で初期化を行ってから、bottomの値を指定する必要があります。

メディアクエリで振り分けているときに、陥りやすいミスです。

<main>
	<div class="box">画面下に表示</div>
</main>

main {
	position:relative;
	height:100vh;
}
.box {
	position:absolute;
	top:50%;
}

@media only screen and (max-width: 1920px) {
	.box {
		top:auto;
		bottom:0;
	}
}