position:absolute; 1.要素のためのスペースを確保しない。2.要素位置を、位置指定された祖先要素のうち最も近いもの、もしくは、その要素の初期包含ブロックを基準にして決定。3.絶対位置指定されたボックスのマージンは、他要素マージンと相殺しない

CSSposition

position:absolute;

 状態:-  閲覧数:982  投稿日:2018-01-14  更新日:2018-01-14
1.要素のためのスペースを確保しない
2.要素位置を、位置指定された祖先要素のうち最も近いもの、もしくは、その要素の初期包含ブロックを基準にして決定
3.絶対位置指定されたボックスのマージンは、他要素マージンと相殺しない

何が問題なの?


「position:absolute;」を単なる「絶対位置」と認識していると、複雑なレイアウトへ遭遇した際、理解できない現象に悩まされる
・例えば下記のような説明
・間違ってはいないけれども、圧倒的に言葉足らず
絶対位置への配置となります。親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上が基準位置となります


position:absolute;

 閲覧数:404 投稿日:2018-01-14 更新日:2018-02-05

1.要素のためのスペースを確保しない


超重要な概念
・「3.絶対位置指定されたボックスのマージンは、他要素マージンと相殺しない」とも関わってくるが、端的に言えば、「絶対位置指定された要素」は宙に浮いた状態となる。その結果、本来、以降に続くはずの要素は(空いたスペース分だけ)前方へ差し込まれる形になる(なぜなら、絶対位置指定された要素が宙に浮いたから)

つまり、「絶対位置指定された要素」と「それまで築いてきた他要素との隣接関係」は全て解消される
⇒ その結果、 「3.絶対位置指定されたボックスのマージンは、他要素マージンと相殺しなくなる」

2.要素位置を、位置指定された祖先要素のうち最も近いもの、もしくは、その要素の初期包含ブロックを基準にして決定


基準位置
・「position が static 以外の直近の祖先要素の包含ブロック」
※「position が static 以外の祖先要素の包含ブロック」がなければ、基準位置は「body の包含ブロック」となる
→ position「absolute」で、親要素position「relative」「absolute」「fixed」は親祖先基準、親要素position「static」はbody基準となる

3.絶対位置指定されたボックスのマージンは、他要素マージンと相殺しない




※「position:absolute;」と「float」の組み合わせは、上記とはまた別の問題を孕んでいる

違いを理解するために膨大な時間を費やしたCSS

 閲覧数:438 投稿日:2018-01-17 更新日:2018-01-17

例1.


共通HTML
<header></header>
<main>
 <p id="red"></p>
 <div id="blue"></div>
</main>


例1-1.position:static;
・対象要素blue(青色)が現在配置されている場所は、『「positionを指定していない状態の要素」が配置された位置の左上』地点に基づいている
<style>
 header{
   margin:20px;
   height:525px;
   padding:5px;
   background-color: GREEN;
 }
 main{
   margin:50px;
   width:900px;
   height:100px;
   padding:10px;
   background-color: GRAY;
 }
 #red{
   float:left;
   width:50px;
   height:50px;
   background-color:RED;
 }  
 #blue{
   position:static;
   float:left;
   width:800px;
   height:50px;
   background-color: BLUE;
 }
</style>




例1-2.position:absolute;親要素のposition:static;
・「position:absolute;」指定しているけれども、「top」「left」プロパティを指定していないケース
・圧倒的に分かりづらい
・しかも、「position:absolute;」と「float」の組み合わせは、また別の問題を孕んでいる
Float right and position absolute doesn't work together
CSSでレイアウトするなら絶対覚えておきたい配置のルール:フロートや絶対配置、z-index とかいろいろ

<style>
 header{
   margin:20px;
   height:525px;
   padding:5px;
   background-color: GREEN;
 }
 main{
   position:static;
   margin:50px;
   width:900px;
   height:100px;
   padding:10px;
   background-color: GRAY;
 }
 #red{
   float:left;
   width:50px;
   height:50px;
   background-color:RED;
 }  
 #blue{
   position:absolute;
   float:left;
   width:800px;
   height:50px;
   background-color: BLUE;
 }
</style>





「position:absolute;」が分からなくなったときに見るエントリー



類似度ページランキング
順位 ページタイトル抜粋
1 position:absolute; 1.要素のためのスペースを確保しない。2.要素位置を、位置指定された祖先要素のうち最も近いもの、もしくは、その要素の初期包含ブロックを基準にして決定。3.絶対位置指定されたボックスのマージンは、他要素マージンと相殺しない 57
2 divタグがdisplay:block;とかしても、ブロック要素にならないときは、 28
3 「position:absolute;」指定する際は、必ず(親要素を含む)祖先要素の何れかで「position」を明示的に指定 27
4 margin相殺 / 水平方向では発生しない。「position:absolute;」「position:fixed;」指定した要素では全く発生しない 26
5 ボタンクリックした際、テキスト選択状態になるのを防止するためには、「user-select: none;」 26
6 Illustrator CS3では、[オブジェクト全体に合わせる]項目が存在しない。そのため「アートボードの大きさ」に自動で合わせることは出来ない 26
7 要素。width と height 属性を指定しなかった場合、(内容のいかんに関わらず)幅 300 ピクセル、高さ 150 ピクセルで表示される 25
8 Chromeでリンク先ページを常に別タブで開くためには、「Ctrlキーを押しながらクリック」 24
9 StableDiffusionのweb版「DreamStudio」を使用してみた感想。それなりに楽しめましたが、課金してまで使用してみたいとは思いませんでした。 24
10 「文春オンライン」に掲載されている画像を「Google Chrome」ブラウザでダウンロードするためには、chrome拡張機能「Absolute Enable Right Click & Copy」を使用します。 24
11 「position:absolute;」が分からなくなったときに見るエントリー 24
12 Google Chrome™ デベロッパーツールで表示できないスマホ画面を確認するためには、「mobile browser emulator」を使用 24
13 CSS3-mediaqueries.jsは、@ importスタイルシートに記述した内容を反映しない 23
14 ページ内リンクの位置を微調整するためには、Negative margin を使用する 23
15 「Google Chrome」を経由したダウンロード個人ルール。「HTTrack Website Copier」とパッケージ化されていない拡張機能「Save As MHT 20220426」の 2 種類 23
16 Chromeで閲覧している任意URLのhtmlタグに対して、なるべく簡単に「html{font-size:0.1em!important;}」を追加したい 23
17 「Illustrator CS3」 で「SVG トリミング出力」するためには、「トリムエリアツール」ではなく「アートボードの大きさ」を「オブジェクトサイズ」へ変更した後出力 23
18 bootstrap3で意図せず横スクロールバーが表示される場合は、containerクラスの入れ子を疑う 23
19 「Google Chrome」で「このページは動作していません xxxx.net でリダイレクトが繰り返し行われました。 Cookie を消去してみてください.」と表示されるWebサイトには、「Microsoft Edge」でアクセスしてみる 23
20 「Google Chrome」でタブをどうしてもたくさん開かなければならない場合は、「すべてのタブをブックマークに追加」後、「ブックマークマネージャ」で(分割などの)整理を行う 23
2024/10/05 9:37 更新
週間人気ページランキング / 9-28 → 10-4
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 19
2 鉄道会社毎のカラーコード | カラーコード(色) 18
3 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 13
4 「東京都」のカラーコード取得は難しい | カラーコード(色) 9
5 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 7
6 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 6
6 RGBの種類 / ビットカラー | RGB(色) 6
6 FontAwesomeでアイコンが□(四角)になって表示されない Forbidden  | Font Awesome(フォント) 6
7 max-width: 100%の効果を打ち消すには、max-width: none; | CSS 5
7 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 5
7 「bgcolor」「background-color」「background」の違い | CSS 5
8 黒体 / 色温度 / D65(6500K)/ D50(5000K)/ K | 色 4
8 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 4
9 「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 | カラーコード(色) 3
9 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 3
9 aタグで複数のブロック要素を囲むやり方 | CSS 3
9 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 3
10 HTML5では「ブロックレベル要素」「インライン要素」で分類しない | HTML5(HTML) 2
10 「Google Chrome」の文字が突然ギザギザで表示されるようになったら、「chrome://flags/#top-chrome-md」へアクセス後、右上の「Reset all」ボタンをクリックします。 | Google Chrome(ブラウザ) 2
10 Design 0 2
2024/10/5 1:01 更新