Webコンテンツの位置を変更するため、CSSでは必ず使うpositionプロパティ。, しかし、absoluteとrelativeを『絶対・相対位置を指定する』という知識だけだと、ページの表示内容を大きく崩すことがあります。, それを防ぐためにpositionプロパティの元々もっている挙動についてご紹介します。, positionプロパティは『HTMLの要素の位置を変更するタイプを指定』します。positionプロパティを使うと次のプロパティの値が有効になります。, 4つのプロパティで要素の位置を指定しても、positionプロパティを設定しないと無効になります。, これを使うことはほとんどありません。positionプロパティが未指定のときと同じだから。, top, bottom, left, rightプロパティの値は元の位置からの距離。, 絶対位置を指定します。親要素のpositionプロパティの値で基準が変わることに注意。, 基準はabsoluteと同じです。absoluteとのちがいは、スクロールしても位置が固定されたままになるところ。, CSS3から追加された新しい値です。fixedと同じようにコンポーネントの追尾で使います。, 基準位置は親の要素です。fixedとのちがいは親の要素の中だけで位置が固定になるところ。, 親の要素がスクロールで画面から消えると、stickyのコンポーネントは追いかけてきません。, いまのところ説明できるのはここまでで、いろんなところの説明を見ても、分かるような分からないようなところがあります。, 自分で動かしてみても、まだ気になる点があります。検証が終わったら内容を更新します。, relativeとabsoluteのちがいは、相対・絶対位置を指定するだけではありません。, Webページに表示したときに決定的にちがいます。まずはabsoluteのサンプルを見てみましょう。. 一般的な(clearfixのような)方法はありませんか？, before---------------------------------------------, after---------------------------------------------, position: absolute や position: fixed が指定された要素は、通常のレイアウト処理から除外されるため、あたかも要素が存在していないかのように後続要素や親要素がレイアウトされます。float 等とは異なり、親要素の枠の外にでも配置できますから、その高さを親要素に考慮させるというのは無理な話です。, 要素を横に並べる用途で使いたい場合、親要素に height を指定したり、position: absolute ではない要素も残すなどして、別途高さを確保しなければいけません。, “回答を投稿”をクリックすることで利用規約、プライバシーポリシー、及びクッキーポリシーに同意したものとみなされます。, このRSSフィードを購読するには、このURLをコピーしてRSSリーダーに貼り付けてください。, サイトデザイン / ロゴ © 2020 Stack Exchange Inc; ユーザーの投稿はcc by-saでライセンスされます。 rev 2020.11.13.38000, Sorry, we no longer support Internet Explorer, スタック・オーバーフロー をより快適に使うためには JavaScript を有効化してください, ありがとうございます！勉強になりました！ちなみに親要素は、高さがなくなっても子要素の配置の基準になるようですね。, position: absolute;した親要素の高さがなくなるのを解消する一般的な(clearfixのような)方法はありませんか？, Feature Preview: New Review Suspensions Mod UX, 前ブロック要素をabsoluteで配置してしまった場合、後続ブロック要素のpadding-topは何に対して適用されるのでしょうか？, position:absolute;でtop及びleft未指定時の挙動について(初期値は？), position: sticky; しているheaderのz-indexが効かない。, 意見を述べること（意見を述べるなら、参照リソース、自分の経験で意見をサポートしてください）. テーブルの中身系に対する position:relative の指定は、定義されていませ … The effect of ‘position:relative’ on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined. 断然Google Chrome派の私はほとんどIEは使わないのですが、まだまだ根強く残っており、実際のところ私の周りはIEを利用している人が多いです。, position:absolute;は要素同士を重ねたい（たとえば画像の上に文字）ときに便利なCSSです。, 私は親（relative）に対して子(absolute)を指定することが多いです。, Chromeでは正しく表示されるのですが、IEだと表示がずれてしまう場合があるようです。, 今回の状況から親となる要素の大きさがわからないためにずれてしまうのでは？と思います。. (adsbygoogle = window.adsbygoogle || []).push({}); 過去の私は何を思ったのか、子となる要素にmargin:auto;を指定していました。, 中央に表示したいわけではないのにこの指定をしているところでおかしいのですが、なんとなくつけちゃった感がすごいです。. ・ちなみに、topをpx指定へ変更すると効きます twitter：@No_1026 sample - CSS position absolute - by tadtadya (@tadtadya) But opting out of some of these cookies may have an effect on your browsing experience. Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. left: 50%が効く理由も同様に親要素がwidth: 100%を仮定されているためです。子がインライン要素の場合に横幅いっぱいに敷き詰められてから折り返されるのもこのためです。, 各ブラウザーは通常は標準準拠モードで動作しますが、古いhtmlを正常に表示するために互換モード（Quirksモード）を持っている場合があります。H.Mayuさん及びmjyさんが言及されていますが、Google Chromeの場合、html先頭に宣言がなされていないと互換モードに切り替わり、今回のようにheightの仮定される値が変わるようです。, なお、Internet Explorer 10以降のように宣言がなされていなくても互換モードに切り替わらないブラウザーもありますし、互換モードによってどのような違いが生じるかもまちまちですので、互換モードの使用は避け、そのためにも必ず宣言を付けることをお勧めします。, などの宣言を行なわない奇癖（互換）モードの HTML では、, といった状況でした。 Front-End Engineer / CSS Alchemist 結論からいうとこの現象は、後に続く要素のbackgroundが指定されている場合（colorでもimageでも）に発生します。, そんな時はbox-shadowを指定した要素に「position:relative;」を追加してみてください。, この他、後に続く要素に「position:relative」を指定する解決策もありますが、その場合は「z-index」も合わせて指定しなければならなくなってしまうので、基本的には↑の方法で良いと思います。, WordPressのsave_postフック関連で問題発生（多重投稿・ゴミ箱）した場合のメモ, vol.3 問題選択画面を制作する – SwiftでiOS用のクイズアプリを作る！, vol.4 問題スタート画面を制作する – SwiftでiOS用のクイズアプリを作る！, IEでdisplay:table-cell;にしてもGoogleMap APIの高さが100%にならない場合の対処法（暫定）, 解決しました！EL CapitanにアップデートしたらIllustratorの右クリックでメニューが表示されない件, WordPressの関連記事プラグイン「YARPP」でリンク切れ画像が表示されてしまう場合の対処方法, WordPressで権限を付加する「add_cap」で思い通りにいかない場合のメモ, $.getJSONで得たJSONをグローバル変数に格納するには、$.ajaxでasync: falseで解決, MacBook ProにVirtualBoxでWindows7をDVDからインストールしようとして失敗してしまう場合の対処方法, .htaccessなどで301リダイレクトを設定するとchromeで結果をキャッシュしてしまう開発者泣かせの仕様, IE11以降を含むInternetExplorerと他ブラウザ判別のユーザーエージェント版(Javascript), 5年間の在宅勤務の結論、「リモートワーク（テレワーク）は相当な覚悟がないと難しい」, chrome拡張でmanifest.jsonでdefault_popupが指定されているとchrome.browserAction.onClicked.addListenerは無効化される, キーボードの方向キーが取得できない場合は、イベントが「keypress」になっていないか注意！, WordPress管理画面のダッシュボードに自作の更新・新規追加フォームのウィジェットを追加する方法. ※具体的に何をやりたいのか、というのはなく、単に疑問に思ったので質問しました, HTML / CSSでは子要素のサイズが確定しないことには親要素のサイズを決定できません。そのため親要素をheight: 0pxと仮定してレイアウトされたために子要素のtop: 50%も0pxとして扱われたのでしょう。, のように明示的な指定があれば、子要素のtop: 50%も効きます。 テーブルの中身系に対する position:relative の指定は、定義されていません。よって、この通り実装している Firefox では無視されるわけです。, 尚、親の table や display:table; に position:relative; を指定しても、そこを基準に絶対配置はしてくれません。御存知の通り、 position:absolute を指定した要素は、祖先の包含ブロックに position:static 以外を指定したとき、そこを基準に絶対配置するのですが、どの要素が包含ブロックを作るかは決まっていて、最初の包含ブロックは viewport、ようするにブラウザの表示領域ですが、それ以下の要素に関しては. ↓ This category only includes cookies that ensures basic functionalities and security features of the website. エンジン毎の解釈の差異かと思いますが（奇癖モードでは body の高さが 100vh になり）効くのが正解な気がしますね。。。, “回答を投稿”をクリックすることで利用規約、プライバシーポリシー、及びクッキーポリシーに同意したものとみなされます。, このRSSフィードを購読するには、このURLをコピーしてRSSリーダーに貼り付けてください。, サイトデザイン / ロゴ © 2020 Stack Exchange Inc; ユーザーの投稿はcc by-saでライセンスされます。 rev 2020.11.13.38000, スタック・オーバーフロー をより快適に使うためには JavaScript を有効化してください, 『親要素widthを指定していないのに「left%」だけ効くのはなぜだろう？』という疑問は残るのですが、何れにしても回答いただいた内容のとおりだと思うので、これから%指定する際は、明示的に親要素にサイズ指定していこうと思います, 同じく55.0.2883.87 m (64-bit)ですが、やはり作用しているように思えます。質問者様のtop n%の部分を変化させることでｔ2の位置が変化しますし、位置も「t1のbottomの位置 + windowサイズのn%分の位置」に表示されます。IE等はt1のbottomの位置にt2が表示されます。, 質問者様が貼ったsourceをそのままtextに貼っているだけなのですが・・・ブラウザのWindowの大きさを変化させるとt2の位置も変化します。なにかPC固有の物が作用していると思い別PCでも試しましたが同様の結果でした・・・, 更新ありがとうございます。スニペット内ではtopが効いていないようにみえます。また私が試していたときは質問者様のコードをそのままtextに貼っていたのですが、スニペット内のコードをtextに張り付けて表示させても効きませんでした。切り分けしてみたところの有無で結果が変わりました・・・, 有用な情報だと思いましたので、勝手ながら回答に反映させていただきました。不都合な点があれば適宜ロールバックして下さい。, (仕様はともかく現実問題として、)「body の高さ」に対する解釈はブラウザ毎に結構異なるのですね。対応が難しいので、これから%指定する際は、明示的に親要素にサイズ指定していこうと思いました, CSSのposition:relativeで、left%だけが効いて、top%が効かないのはなぜ？ topをpx指定にすると効きます, Feature Preview: New Review Suspensions Mod UX, Flexboxで、「.left { flex: 1 100px; } 」　は、「.left { flex: 0 0 100px; 」？, position:absolute;でtop及びleft未指定時の挙動について(初期値は？), background-color:でサイト（https://support.google.com/*）が正しく表示されない場合の対処方法, 意見を述べること（意見を述べるなら、参照リソース、自分の経験で意見をサポートしてください）. on CodePen. 仕方がない、何でもよ < br > いから食物のある所迄あるかうと決心をしてそろ < br > りそろりと池を左りに廻り始めた。 < br > どうも非常に苦しい。 そこを我慢して無理やりに < br > 這つて行くと漸くの事で何となく人間臭い所へ出 < br > た。 親要素のpositionプロパティの値で、基準位置が変わり、親要素がstaticのときコンテンツが大きく移動しています。基準がページ全体の左上だから。, これを親要素を基準に移動させるには、.parent2のrelativeのようにstatic以外を使います。, 親要素のについての話なので子要素には関係ないと思われがちですが、親要素でstatic以外を指定すると子要素にも影響します。, absoluteは、要素が完全に移動してほかの要素から浮き上がります。元の領域は消えたので、"parent end"は消えた要素の分だけ上にずれます。. このサイトを利用することによって、あなたはこのサイトのCookie Policy、Privacy Policy、およびTerms of Serviceを読んで理解し、同意したものとみなします。, スタック・オーバーフローはプログラマーとプログラミングに熱心な人のためのQ&Aサイトです。すぐ登録できます。, CSSのposition:relativeを学習しているのですが、下記コードで「left%だけが効いて、top%が効かない」のはなぜでしょうか？ jsdo.it：No_1026, table系にはposition:relativeが効かない ( http://gyauza.egoism.jp/clip/archives/2007/11/071129-tablepositionrelative/ ), CSS2.1 – Visual formatting model – 9.3.1 Choosing a positioning scheme: ‘position’ property, CSS2.1 – Visual formatting model details – 10.1 Definition of “containing block”, CSS2.1 – Tables – 17.4 Tables in the visual formatting model”. CSSのposition:relativeとposition:absoluteを使ったデザインがありますが、意外と子要素にposition:absoluteを指定していても、親要素のtext-alignやvertical-alignなどの影響を受けるときがある、といった話です。 block-level / table cell / inline-block が、この包含ブロックを作りますが、table はブロックレベルのような振る舞いをするだけで、実はブロックレベルではないらしく、包含ブロックは作れないようです。Tableの項を見ると. Webコンテンツの位置を変更するため、CSSでは必ず使うpositionプロパティ。しかし、absoluteとrelativeを『絶対・相対位置を指定する』という知識だけだと、ページの表示内容を大きく崩すことがあります。それを防ぐためにpositionプロパティの元々もっている挙動についてご紹介します。 テーブルの中身系に対する position:relative の指定は、定義されていません。よって、この通り実装している Firefox では無視されるわけです。 尚、親の table や display:table; に position:relative; を指定しても、そこを基準に絶対配置はしてくれません。 This website uses cookies to improve your experience while you navigate through the website. 原因はdiv要素にposition:relativeを指定している時は、position:fixedにしている要素にz-indexを指定していないからでした。. relativeの基準が元の位置なので、元の領域を消すことができません。消してしまうと基準位置が分からなくなるからです。, これを知っていないと、意図しないところにコンテンツが移動して、Webページ全体を崩すことがあります。, どうしてもインターネットで調べて勉強するのが苦手という人のために、HTMLとCSSの最新技術と基本を網羅できる本を2冊選びました。, この内容を身につければ、ほかの本は必要ありません。将来的には、自分の力で、書籍を使わずに、インターネットにある情報だけで学べます。, このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。, システムエンジニア＆プログラマ。キャリア16年。SIerに12年、フリーと会社員を交互に繰り返すこと4年。, まったく何もしないのはダメなので、今まで得てきたものをWebサイトで発信しながら少しだけ活動中。, コメント等いただいておりますが、回答・回答は遅くなりがちです。（1週間以内で早い方。）, 初対面でいきなりケンカ腰で来られると、『いきなり刺されるかも？』と同じくらいに感じるので、100%レスポンスがあるとはかぎりません。. These cookies do not store any personal information. ↓ See the Pen 当サイトでは利便性向上や閲覧の追跡のためにGoogle・他提携サービスによりCookieが使用されています。サイトの閲覧を続けた場合Cookieの使用に同意したことになります。. ↓ It is mandatory to procure user consent prior to running these cookies on your website. on CodePen. CSSのposition:relativeとposition:absoluteを使ったデザインがありますが、意外と子要素にposition:absoluteを指定していても、親要素のtext-alignやvertical-alignなどの影響を受けるときがある、といった話です。 わたしと納豆ごはん 納豆、Web、雑記など. relative、absoluteの細かい違い 先程のサンプルだけだと分からない、relativeとabsoluteの違いを説明します。比較用のサンプルを用意したので、挙動の違いを確認してみてください。 上がrelative、下 … We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. 同じ事を書いている記事は他にもありますが、個人的に一番わかりやすくて細かいと思っていた記事が消えていたので。, というわけで、細かい話 は、ほぼ table系にはposition:relativeが効かない ( http://gyauza.egoism.jp/clip/archives/2007/11/071129-tablepositionrelative/ ) にあった内容を引っ張ってきて、文調と表現を若干変えてうちのブログに合わせただけです。許可も取ってませんが、お許し下さい。, や