![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
![](http://oshiete.xgoo.jp/images/v2/common/profile/M/noimageicon_setting_10.png?e8efa67)
以下のコードで、height 100% になる理由がわかりません。
通常、親の高さの相対として高さは付けられると思っているのですが、
position absolute なら関係ないのでしょうか ?
<!DOCTYPE html>
<html lang="ja"><head>
<meta http-equiv="content-language" content="ja">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.alert {
position: absolute; top: 0%; left: 0%;
width: 100%;
height: 100%;
background-color: rgba( 0, 0, 0, 0.5 );
}
</style>
</head>
<body>
<div class="alert">
</div>
</body>
</html>
また、なぜ以下のコードが縦横 100% になるかもわかりませんでした。
position: absolute; top: 0; left: 0; bottom: 0; right: 0;
わかる方おりましたら、わかりやすい説明で頂けると助かります。
どうぞ、宜しくお願い致します。
No.2ベストアンサー
- 回答日時:
これはたしかに疑問ですね。
No.1さんが上げてくれている参考ページではpositionの基点がどこかっていう話が解説されているのですが、実はこの質問の回答としては的を射ない。
positionは親または先祖の要素を辿って行って、relativeを打っているところを基点としますよね。
質問者さんのあげているコードの場合はhtmlタグかbodyタグが基点になります。ここまではOKです。No.1さんがあげてくれた参考ページでもわかります。
しかし、bodyやhtmlは本来、高さが与えられていないときは、0%のはず。。。
よく画面いっぱいのデザインとかでbodyとhtmlにheight:100%;当ててなくてコケるでしょ。
https://qiita.com/shouchida/items/205fed63b88668 …
とすれば、その内側の要素(ここでは.alert)も高さが0になるはず。なのに.alertの要素は画面いっぱいになる!?、っていうのが疑問ってわけです。
たしかに疑問ですよねえ。
私見でしか話せないのですが、たぶんhtmlタグって特別なんだと思います。
html {
background;#ff0;
}
ってすると、高さ与えていないのに背景いっぱいに色がつくんですよねえ。
おそらく、ブロック的な高さはないけどページの基本となる特徴ももってるよ、という感じなんでしょうか。
まっさらなキャンバス、みたいな感じですかねえ。
というわけで、top: 0; left: 0; bottom: 0; right: 0;にしたとしても、
同じ理由で、htmlタグを基準にしているかぎりは画面いっぱいになるのではないでしょうかねえ。
不確かなので参考までです。
CSS 仕様、ブラウザーの仕様の微妙なバランスでしょうか、、、
謎に出会えて、良かった気もします。
ご回答頂きありがとうございました !
No.1
- 回答日時:
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- HTML・CSS cssが効かなくて困ってます 1 2023/01/01 23:57
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS flex の各子要素を横幅 100% にしたい 1 2022/09/22 21:25
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS html cssのmargin 5 2022/12/03 11:04
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
objectタグを使って背景を透明...
-
POSTしたデータの文字コードがu...
-
なぜ height 100% がつくのか ...
-
自分で<head>内をかけない場合...
-
body内にmetaタグを記述は問題...
-
HTML5での http-equiv="refresh...
-
HTMLファイルのインクルードで...
-
文字コードのメタタグ
-
refreshタグ 自動的にジャンプ...
-
html で 変数を定義できますか?
-
検索避けのメタタグの数と効果
-
根号の書き方について
-
文字化けと<iframe>の問題
-
metaタグで指定していることをh...
-
Google検索でサイト説明文が文...
-
FFFTPでの文字化け
-
プログラムについて。
-
HTMLからフォルダを開きたい
-
Excelで、社外秘(閲覧のみ)と...
-
HTMLページが勝手にダウンロー...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
css ,videotタグ。ホームページ...
-
POSTしたデータの文字コードがu...
-
body内にmetaタグを記述は問題...
-
根号の書き方について
-
文字化けを故意に表示したい
-
HTMLファイルのインクルードで...
-
先日ウェブデザイン技能検定三...
-
iframe内の表示を常に最新にしたい
-
borderでa:hover下線表示させる...
-
指定した演算を実施の結果を表...
-
ページ全体を中央に配置したい...
-
safariだけcssが反映されない
-
わざと文字化けさせるには
-
WEBページがIEだけ文字化けして...
-
html で 変数を定義できますか?
-
<!DOCTYPE html>あってますか?...
-
COLDFUSIONの文字化け
-
textareaの一行の文字数制御
-
Duolingo のソースコードの名前...
-
Aタグのmailtoでメッセージ作成...
おすすめ情報