人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

●質問者: tengen
●カテゴリ:インターネット ウェブ制作
✍キーワード:CSS いまいち
○ 状態 :終了
└ 回答数 : 5/5件

▽最新の回答へ

1 ● Yota
●20ポイント
<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

2 ● オーイェー
●20ポイント

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

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

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

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

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


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


しかし、SEO等の為に、

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


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

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

◎質問者からの返答

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


3 ● オーイェー
●20ポイント

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

<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;
}

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


4 ● shimazuyosi30
●20ポイント

http://oshiete1.goo.ne.jp/qa2512651.html


5 ● Yota
●20ポイント

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/

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ