Q&A
abusoluteとrelativeを対にして使わなければならない。このように主張されている方もおいでです。しかし、ここのbodyタグように書く必要がないのであればこれを受け入れます。
どのようなときに書きどのようなときには不要なのか一例を教えていただけますとありがたいです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Document</title>
<style type="text/css">
h2 {
position: absolute;
left: 100px;
top: 150px
}
</style>
</head>
<h2>ここでは<body> が父、<h2>が子となる。位置はLeft:100px top：150px</h2>
</body> </html><p>moji-p は<body> のデフォルトの位置に表示される</p>
abusoluteとrelative
###relativeを明記せずとも動作する。
暗黙の了解ではないのか。
##定義：
ここでは<body> が父、<h2>が子となる。父である<body>は<h2>のabsoluteの指示に従い文字を表示する。
###abusoluteの動作
abusoluteは<h2>のような自分の土地を持っていないため何かを書こうすると
父の土地のtopから100px、leftから100px、などと絶対的な位置を指示して書くことになる。
###無視される場合：
父の土地からはみ出た位置を指定するとbrowserは無視してしまう。
abusoluteは絶対的な要素、relativeは相対的な要素と呼ばれる。
### abusoluteが命令できる タグ
body
img
回答3件
0
自己解決
# ありがとうございます。
自己解決の場合のみ記入してください：とのこと：
## 下記の記述を見つけました。これで解決と致します。
## 1.absoluteは、relativeが指定されている”親要素”を基準にして、自分の位置を決定します。
## 2.absoluteの注意点ですが、親要素にrelativeを指定しなくても、見た目上問題なく動作することがあります。ただ、思わぬ動きやレイアウト崩れに繋がりやすいので、”relativeとabsoluteはセットで使う”と覚えておいてください。
投稿2021/11/30 09:38
総合スコア35
0
position abusoluteの意味が理解できないでいます。relativeの記入を必ずしも必要としない。必要なときはどんな時か、困っています。
解決しているわけではないので。もう少し努力してみます。
投稿2021/11/29 13:50
総合スコア35
0
暗黙の了解ではないのか。
これがご質問でしょうか？
暗黙の了解ではなくて仕様です。
If no ancestor establishes one, the absolute positioning containing block is the initial containing block.
投稿2021/11/29 01:19
総合スコア36163
あなたの回答
tips
プレビュー
