スタイルシートCSSで、positionを使用する場合
position : relative + absolute を使う事が一般的のようですが、どのようなメリットがあるのでしょうか?
よろしくお願いします。
参考サイトhttp://www.css-lecture.com/log/css/037.html
No.1ベストアンサー
- 回答日時:
absolute を指定した要素の親要素が static の場合、親要素を基準に位置を決めるのでは無くウインドウの左上を基準に位置を指定することになります。
親要素に relative を指定しておくと親要素の左上から指定した位置に配置されます。
サイト全体の左上から一つ一つ位置を決めていくと、途中の要素の高さが変わった場合などは全部位置指定をやりなおす事になりますが、親要素を基準にできると部品部品でデザインできるので便利だったりします。
どのようにデザインしたいかで、何がベストかは替わってくると思いますが。
No.3
- 回答日時:
ちょっとサンプル・・色々書いてみりゃわかる。
__→タブに変換すること
The W3C Markup Validation Service ( http://validator.w3.org/#validate_by_input )
W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_ … )
Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint. … )
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
__<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
__<title>サンプル</title>
__<meta name="author" content="ORUKA1951">
__<meta http-equiv="Content-Style-Type" content="text/css">
__<link rev="made" href="mailto:orika1951@hoge.com" title="send a mail" >
__<link rel="START" href="../index.html">
__<style type="text/css">
<!--
div{padding:5px 10px;}
div.header,div.section,div.footer{
width:auto;margin:10px 200px;
}
div.section div.nav,
div.footer div.nav{
position:absolute;/* fixedでも良い */
width:170px;top:20px;
}
div.section{position:relative;padding-left:210px;}
div.section div.nav{left:10px;}
div.footer div.nav{right:10px;}
div.section div.figure{
__height:42px;width:76px;
__float:right;
}
div.header{background-color:gray;}
div.section{background-color:green;}
div.footer{background-color:yellow;}
div.section div.nav{background-color:lime;}
div.nav{background-color:magenta;}
div.figure{background-color:white;}
-->
__</style>
</head>
<body>
__<div class="header"><!-- ヘッダー -->
____<h1>見出し</h1>
____<div class="aeticle summary">
______<p>段落</p>
____</div>
__</div>
__<div class="section"><!-- 本文 -->
____<h2>見出し</h2>
____<div class="figure"><!-- 挿絵 -->
______<img src="http://cmm001.goo.ne.jp/img/logo/goo.gif" width="71" height="37" alt="画像">
____</div>
____<p>段落</p>
____<p>段落</p>
____<div class="nav"><!-- navigation -->
______<h3>目次</h3>
______<p>親がrelative</p>
____</div>
__</div>
__<div class="footer"><!-- フッター -->
____<div class="nav"><!-- navigation -->
______<h3>目次</h3>
______<p>親がstatic</p>
____</div>
____<p>段落</p>
____<p>段落</p>
__</div>
</body>
</html>
No.2
- 回答日時:
absolute(絶対配置)は、それを含むstatic以外の直近の親コンテナブロックの位置、サイズを基準に配置されます。
もし親のコンテナブロックにstaticのものしかなければ、ウィンドウの左上を基準にします。ユーザーエージェントがプリンターのようなページ媒体の時は、最初のページになります。fixedも同様ですが、ページ媒体のときは各ページの左上を基準にに印刷されます。
ただ、それが一般的かと言うと、決してそうではありません。いえ、そうでない場合のほうが多いかもしれません。
そのサイトは素人さんの書かれたもののようで、そもそもHTMLをそのようなマークアップはしないようにHTMLやCSSの仕様書に記載されています。
次のようなマークアップを考えて見ましょう。absolute-0なんてマークアップはしません。(^^)
<body>
<div class="header">
<h1>見出し</h1>
<div class="aeticle summary">要約</div>
</div>
<div class="section">
<h2>見出し</h2>
<p>段落</p>
<div class="nav">
<h3>目次</h3>
</div>
</div>
<div class="footer">
<div class="nav"><!-- navigation -->
<h3>目次</h3>
</div>
</div>
</body>
この場合、div.sectionがrelativeのとき、div.section div.navをabsoluteすると、親コンテナブロックのdiv.sectionに対して配置されますから、top:0;left:0でdiv.sectionの左上
にきます。
ところが、div.sectionがstaticの場合は、親にstaticなものがありませんから、同じtop:0;lefy:0でウィンドウの左上に行きます。
div.header,div.section,div.footer{
width:auto;
margin:10px auto;
}
div.section div.nav,
div.footer div.nav{
position:absolute;/* fixedでも良い */
width:200px;
top:100;
}
div.section{position:relative;}
div.section div.nav{
left:0;
}
div.footer div.nav{
right:0;
}
div.header{background-color:gray;}
div.section{background-color:green;}
div.footer{background-color:yellow;}
div.section div.nav{background-color:lime;}
div.nav{background-color:magenta;}
HTMLは文書構造にしたがってマークアップする。後でCSSだけ読んでも何をどうしたかわかるように・・absoluteしていたものをfixedに代えたいけど、これってどこのこと?悩まなくてすむでしょ。footerのnav(navigation Link)をabsoluteしていたけど今度はfixedしようとか・・・
CSSはきちんとカスケードさせれば、HTMLに変なclass名やidを付けなくてすむ」
div.section div.navと、dic.footer.div.navに同じ設定をしたけりゃ、この場合
div div.nav{}でよい。同じ宣言を何度も書かないようにセレクタ文字列はグループ化しよう。また詳細度を計算すると前後に関係なく優先したいものが決められる。
div.section div.nav{background-color:lime;}/* 詳細度 22 */
div.nav{background-color:magenta;} /* 詳細度 11 */
上が優先される。
きちんと仕様書読みましょう。知ったかぶりの説明サイトだと、量ばかりで得るところ少ない。
視覚整形モデル ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 画面に表示したらアニメーションを開始したい 3 2023/01/13 15:38
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
- HTML・CSS imgとpを縦・横に中央揃えする 1 2023/01/17 11:30
- HTML・CSS HTML、cssのatomつぅーやつで 課題Ex1ってやつを表示させたいのですが、 私は課題Ex1が 2 2022/12/15 16:56
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
- HTML・CSS htmlとcssで吹き出しの中に文字を置きたいのですが、 html 〈div class bb〉 〈 3 2023/02/04 22:44
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
HTML属性での「""」 「''」違い
-
複数のボタンを等間隔に、かつ...
-
div要素が重なってします
-
html の divとtable の役割
-
グラフィックス
-
divとpの使いわけ
-
画面を縮小するとカラムが落ち...
-
フッターがウインドウの一番下...
-
idとclassの指定方法
-
htmlの見出しタグ(<h1>)の次...
-
<div id="container">の使いか...
-
htmlのolやulなどlistにtitleや...
-
reuterのScraypingで不思議な現...
-
レスポンシブかつ、スマホ、携...
-
ホームページ作成会社を探して...
-
<BR> が多数連続しています。
-
リストで画像を右に表示したい
-
コンピューターの画像ブロック
-
特定範囲内のCSSの継承を断ち切...
-
<!-- #BeginLibraryItemとは
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
HTML属性での「""」 「''」違い
-
div要素が重なってします
-
<div id="container">の使いか...
-
複数のボタンを等間隔に、かつ...
-
html の divとtable の役割
-
divとpの使いわけ
-
ヘッダーとフッターだけ背景を...
-
min-heightとheightの違いについて
-
セクションをdivで囲むと見出し...
-
画面を縮小するとカラムが落ち...
-
ヘッダーを左右に二分割する方...
-
1時間30分を簡単に表したいで...
-
スペースを使わず文字位置を揃...
-
CSSで、contentsがfooterに重な...
-
h1に自分自身へのリンクを張...
-
divの中に外部のHTMLを埋め込む
-
divを横に並べる方法
-
hタグの右横に画像を表示
-
h1のテキストサイズよりh2の方...
おすすめ情報