CSSの絶対配置と相対配置の基本的な意味はわかったのですが、どういう場合に使いわけるのかが、いまいちよくわかりません。具体的な例を挙げて説明してください。

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2007/08/16 15:39:27
  • 終了:2007/08/23 15:40:30

回答(5件)

id:Yota No.1

Yota回答回数453ベストアンサー獲得回数282007/08/16 18:26:46

ポイント20pt
<html> <head> <style> body {color:#fff;} p.haikei {width:600px;height:100px;background:#000;padding:5px;/*text-align: center;*/} .soutai {position:relative; left:50px;top:50px;background:blue;padding:5px; } .zettai {position:absolute; left:400px;top:110px;background:green;padding:5px; } </style> </head> <body>

相対位置 絶対位置

</body> </html>
このhtmlでsoutaiはhaikeiボックス内の本来あるべき位置から右に50px、下に50px移動しています。 zettaiはウィンドウの左上を原点として右に400px、下に150px移動した位置にあります。 この状態で、「相対位置をずらす」のコメントをはずすと、soutaiボックスは右に移動しますが、zettaiボックスは絶対位置であるため影響を受けません。 さらにzettaiをleft:50px;top:50px;と変更すれば、soutaiボックスの上に重なってしまいます。 このようにabsoluteは他の要素をまったく無視して位置を指定したいときに使い、relativeは他の要素と関連付けながら位置決めしたいときに使います。 参照。 http://www.htmq.com/style/position.shtml
id:OhYeah No.2

オーイェー回答回数81ベストアンサー獲得回数142007/08/16 21:27:12

ポイント20pt

このページを例にします。

http://q.hatena.ne.jp/1187246365

このページのソースを見ると、h1タグは、

CSSの絶対配置と相対配置の基本的な意味はわかったのですが、どういう場合に使いわけるのかが、いまいちよくわかりません。具体的な例を挙げて説明してください。

という部分になっています。


が、このページにはヘッダー(Hatena::Questionという画像など)があるので、<body>の後、<h1>より前に、色々なタグがあります。


しかし、SEO等の為に、

<body>の次には<h1>をおきたいと考えることがあります。


そのように、文書構造で出てくる順番と

画面上で表示する順番を変えたいとき等に使用することがあります。

id:tengen

「画面上で表示する順番を変えたいとき等に使用すること」は絶対配置、相対配置ですか?それぞれの例をお願いします。

2007/08/16 23:00:56
id:OhYeah No.3

オーイェー回答回数81ベストアンサー獲得回数142007/08/17 01:02:19

ポイント20pt

画面上で表示する順番を変えたい時には絶対配置を使用すると簡単に実現できます。

<h1>hoge</h1>

piyo

を画面上で

piyo

hogeで表示するなら

h1 {
  position:absolute;
  top: 50px;
  left: 0px;
  height: 25px;
}
p {
  margin-bottom: 25px;
  height: 50px;
}

みたいな感じです。

同様のことをrelativeで実現しようとした場合、

h1の位置をずらすことまではできるのですが、本来hogeが表示されるはずだった、スペースがpiyoの前に残ってしまいますので、その対処も必要になります。

http://www.whitefox-ex.com/library/CSS5.html

逆にrelativeは、他の要素との位置関係と連動するために

img:hover {
  position: relative;
  top: 0px;
  left: 32px;
}

のようにすれば、親要素と連動して動作をするデザインの場合を絶対配置よりも簡単に実現できます。

id:Yota No.5

Yota回答回数453ベストアンサー獲得回数282007/08/17 09:09:19

ポイント20pt

1 回答者です。すいませんHTMLをうまく表示できていませんでした。

<html>

<head>

<style>

body {color:#fff;}

.haikei {width:600px;height:100px;background:#000;padding:5px;/*text-align: center;*/}

.soutai {position:relative; left:50px;top:50px;background:blue;padding:5px; }

.zettai {position:absolute; left:400px;top:110px;background:green;padding:5px; }

</style>

</head>

<body>

<div class="haikei">

<!--相対位置をずらす-->

<span class="soutai">相対位置</span>

<span class="zettai">絶対位置</span>

</div>

</body>

</html>

http://dummy.com/

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません