- ベストアンサー
relativeについて
子がabsolute指定されるとその親はrelative指定にしなければいけない みたいですがどうしてでしょうか？ 例が悪いですが下記のHPに載ってるCSSです。 http://www.stylish-style.com/csstec/basic/g-photo-guard.html (実際にはこのCSSは閲覧者とって不便ため使わないです。) 自分でタグをそのまま書いてみてIEでみたのですがrelativeがない 場合とある場合との違いがわかりませんでした。
- shoshosho
- お礼率97% (131/134)
- CSS
- 回答数2
- ありがとう数4
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
> 親要素のどれかがrelativeになるとそれの上左端に基点を置くということでしょうか？ YES. ちょっと説明が曖昧でしたがstatic以外（relative又はabsoluteやfixed)の祖先の要素が基点になります。
その他の回答 (1)
- steel_gray
- ベストアンサー率66% (1052/1578)
relative指定にしなければいけない、という決まりはありません。 absolute指定の配置の基点は直近の包括ブロックの上左端になりますので、指定がなければbodyの上左端になります。 単純なテストでは違いが出ないかもしれません。 以下、違いがでる例です。 <body> <div style="width:100%;height:100px;"> ダミー </div> <div style="position:relative;"> <div style="position:absolute;top:0;left:0;">例１</div> </div> <div> <div style="position:absolute;top:0;left:0;">例２</div> </div> </body>
お礼
ご回答ありがとうございます^^ 普通(親要素がrelative以外)だとbodyの上左端が基点になるけど 親要素のどれかがrelativeになるとそれの上左端に基点を置くということでしょうか？ 直近の包括ブロックはabsoluteでもstatic(デフォルト)でも同じ直近の ブロックには変わりがないですし なぜかrelativeのときだけそこに基点をとるというのが不思議に思えたのですがそういう仕様なんでしょうか。 例ですが非常にわかりやすかったです。ありがとうございました！
関連するQ&A
- position : relative + abs
スタイルシートCSSで、positionを使用する場合 position : relative + absolute を使う事が一般的のようですが、どのようなメリットがあるのでしょうか？ よろしくお願いします。 参考サイトhttp://www.css-lecture.com/log/css/037.html
- ベストアンサー
- CSS
- 画像のコピー防止について
ホームページビルダー8でHPを作成しています。 下の↓ 画像コピー防止の方法をやってみたのですが上手くいきません。 http://www.stylish-style.com/csstec/basic/g-photo-guard.html HTML、スタイルシート、画像dataをどのように書き込めばいいのか？ どなたか詳しい方教えてください。 他にもっと簡単な方法があれば教えてください。
- 締切済み
- ホームページ作成ソフト
- CSSが動かない
http://www.stylish-style.com/csstec/ultimate/css-roll-2.html このサイトにCSSのプルダウンメニューが紹介されていますが、プログラムをコピーしてHTMLファイルにペーストしても、動作しません。 具体的には、最初のメニューは表示されますが、マウスを乗せてもプルダウンメニューが出てきません。 まったく同じような http://www.stylish-style.com/csstec/ultimate/css-roll-1.html これは動作するのですが、なぜ上のほうは動作しないのでしょうか？ 原因など分かる方、教えてください。
- ベストアンサー
- その他（プログラミング・開発）
- relativeタグにすると・・・
今、ホームページを作っていてわからない事があったので 質問させていただきます。 テーブルの位置をCSSのrelativeタグで指定しているのですが、 そうすると、 テーブルが狭くなってしまいます。 widthで指定しても、変わりません。 どうすればいいでしょうか？
- 締切済み
- HTML
- relativeとabsolute どちらが良い？
こんにちわ。 現在ホームページを作成しています。 画像や文章の位置をＣＳＳで調整しているのですが、relativeとabsolute、どちらを使うべきでしょう？ お答えくださる場合は、なぜその方がよいのか、理由も答えてくださるとうれしいです。 皆さま、よろしくお願いします。
- 締切済み
- HTML
- 背景をダウンロードさせない方法について
以下のサイトを参考にして、右クリックで画像を保存されないようにしてみました。http://www.stylish-style.com/csstec/basic/g-photo-guard.html しかし、残念ながら右クリックすると普通に保存出来てしまいます。何がいけないのでしょうか。 ＜htmlファイル＞ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>画像保存禁止</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div class="sample"> <span class="guard"></span> <img src="略" alt="画像" width=650 height=918> </div> </body> </html> ＜cssファイル＞ div.sample { position:relative; width:650px; height:918px; } span.guard { position:absolute; display:block; width:100%; height:100%; border:thin solid black; background-image:url(img/beach.png); }
- ベストアンサー
- HTML
- 「:after」を使って画像の上に画像を重ねたい
スマフォサイトを作っています。 画像を配置して、その上に枠を重ねて表示したいと思いました。 position: relative; position: absolute; を使えばできるのは分かっているのですが、 この場合、<img>タグを2つ書かなくてはいけない。 これを写真画像にクラス指定をするだけでいい手段はないかと思い、 「:after」要素を使えばできるのではないかとやってみました。 ▼HTML <p class="photo"> <a href="#"><img src="img/image.jpg"></a> </p> <p> テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト </p> ▼CSS img { max-width: 100%; height: auto; } .photo { position: relative; } .photo:after { position: absolute; content: url(img/photo_waku.png); top: 0px; left: 0px; } こんな感じでやってみたところ、添付画像のような状態になりました。 表示はしてくれました。 しかし写真画像は自動でサイズ変更が行われるのに、 枠画像は実寸表示されています。 これはつまり「img」で指定しているスタイルが効いていないということ。 しかしこれをどういじれば、枠画像も自動で変更されるのかが分からなくて困っております。 そもそも可能かどうかも分かっておりません。 ご存知の方いらっしゃいましたら、ご教授いただければ幸いです。 よろしくお願いいたします。
- ベストアンサー
- CSS
- CSSに関する質問です。position absolute Blockのセンタリングについて
position: relative; 指定されたBlockについては、margin:0 auto; 指定によって、IEバグ対策も施した上でセンタリングすることに成功しました。ところが、ある別のIEバグ対策のためにそのブロック指定をabsoluteに変更した所、CSSはそれ以外何も変えないのに、今までセンタリング出来ていたブロックが途端に左寄せになってしまいました。 そこで質問です。そもそもabsolute指定されたブロックは、上記の方法ではセンタリング出来ないのでしょうか？ どうすればabsolute指定されたブロックをCSSによってセンタリング出来るのでしょうか？ どうかお教えください。
- ベストアンサー
- ブラウザ
- CSSのdivのposition:relative;で位置がずれない
IE6を使用しています。 次のような 「sample.css」 .sample {height:90px; background-color:#00ff00; font-weight:bold; position:relative; top 40px; } .sample2 {color:#ff0000; position:absolute; top:10px; left:10px } .sample3 {color:#ff0000; position:absolute; top:30px; left:30px } 「a.html」 <html> <head> <link rel="stylesheet" href="sample.css" type="text/css"> </head> <body> <div class="sample"> position:relative <div class="sample2"> sample2 </div> <div class="sample3"> sample3 </div> </div> </body> </html> を実行した場合に、ブラウザのトップから40pxだけ下にclass="sample"にある内容を 表示させたいのですが、どうも下にずれてないようなのです・・・ 何が原因なのでしょうか？
- ベストアンサー
- HTML
- サイドバー用のプルダウンメニューの作成
こんにちは。 現在、サイドバー用のプルダウンメニューを作成しようと考えています。下記のサイトのように、縦にメニューを並べるような感じです。 下記サイトはオンマウス時に横にプルダウンが表示されていますが、これを縦にプルダウンが表示されるようにするにはどのようにjavascript、html、cssを作成すればいいでしょうか？下記サイトはCSSとhtmlで作られていますが、私はjavascriptを使うつもりでいます。 どなたかご存知の方がいらっしゃりましたら、ぜひ教えてください。 http://www.stylish-style.com/csstec/ultimate/css-roll-2.html
- ベストアンサー
- JavaScript
お礼
再度の回答ありがとうございます。 なるほどよくわかりました！ 詳しく説明していただいて本当にありがとうございました。