記事公開日

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

お客さん

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

どうしたらいい?

隊員1号

同じ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;
	}
}
この記事のURLをコピー

メールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

関連情報

運営者プロフィール
運営者のプロフィール画像
隊員1号

IT系フリーランスとして10年の経験を持つレスキュー隊。HTML・CSS・JS・PHPなど幅広いスキルを持つ。

詳しいプロフィール