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

CSSposition

position:absolute;

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

何が問題なの?


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


position:absolute;

 閲覧数:126 投稿日: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

 閲覧数:149 投稿日: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 divタグがdisplay:block;とかしても、ブロック要素にならないときは、 28
2 「position:absolute;」指定する際は、必ず(親要素を含む)祖先要素の何れかで「position」を明示的に指定 27
3 margin相殺 / 水平方向では発生しない。「position:absolute;」「position:fixed;」指定した要素では全く発生しない 26
4 ボタンクリックした際、テキスト選択状態になるのを防止するためには、「user-select: none;」 26
5 Illustrator CS3では、[オブジェクト全体に合わせる]項目が存在しない。そのため「アートボードの大きさ」に自動で合わせることは出来ない 26
6 要素。width と height 属性を指定しなかった場合、(内容のいかんに関わらず)幅 300 ピクセル、高さ 150 ピクセルで表示される 25
7 Chromeでリンク先ページを常に別タブで開くためには、「Ctrlキーを押しながらクリック」 24
8 「position:absolute;」が分からなくなったときに見るエントリー 24
9 Google Chrome™ デベロッパーツールで表示できないスマホ画面を確認するためには、「mobile browser emulator」を使用 24
10 CSS3-mediaqueries.jsは、@ importスタイルシートに記述した内容を反映しない 23
11 ページ内リンクの位置を微調整するためには、Negative margin を使用する 23
12 「Illustrator CS3」 で「SVG トリミング出力」するためには、「トリムエリアツール」ではなく「アートボードの大きさ」を「オブジェクトサイズ」へ変更した後出力 23
13 bootstrap3で意図せず横スクロールバーが表示される場合は、containerクラスの入れ子を疑う 23
14 レイアウトがどうしても崩れるときは、div marginへマイナス値が設定されていないか、確かめる 22
15 「レイアウト崩れ」がどうしても解決しない → Chrome「デベロッパーツール」で怪しいと思った要素を、正常表示されるまで削除し続けていく 22
16 テーブル枠線がどうしても消えない時は「border-collapse: collapse;」 22
17 textareaのスクロールバーが横へはみ出す場合は、「box-sizing:border-box;」を指定する 22
18 背景画像がどうしても表示されない → 「clear:both;」を挿入してみる 21
19 「Webページへのリンク」をクリックした際、Chrome起動オプションを適用させるには、レジストリを書き換えるしかない 21
20 HTML5では、「input 要素」「button 要素」を「フォームタグ」の外で直接記述しても良い 21
2021/8/02 9:06 更新
週間人気ページランキング / 7-26 → 8-1
順位 ページタイトル抜粋 アクセス数
1 画面キャプチャ | Chrome 拡張機能(ブラウザ) 51
2 RGB ⇔ Lab | 色変換(色) 46
3 血の色 / #b30000 / #360800 / #ff0000 | 色 31
4 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 25
5 RGBの種類 / ビットカラー | RGB(色) 24
6 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 23
7 「属性」「プロパティ」「アトリビュート」の違い | CSS 21
8 Design 0 20
9 「bgcolor」「background-color」「background」の違い | CSS 15
10 コズミックブルーが何色か分からない | 色 12
10 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 12
11 使用していないCSSをチェックする、標準的な方法を知りたい | CSS 11
11 HSLとHSVの違い | 色変換(色) 11
12 ページ内リンクの位置を微調整するためには、Negative margin を使用する | CSS 10
13 キャラクター無料着せ替えジェネレーター Rinmaru Games / オンラインサービス | イラスト素材(デザイン) 9
13 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 9
13 アドベンチャーゲーム系の素材をどうやって用意するの? | イラスト素材(デザイン) 9
13 キャラクター無料作成ジェネレーター / FLASH / オンラインサービス | イラスト参考(デザイン) 9
13 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 9
14 黒体 / 色温度 / D65(6500K)/ D50(5000K)/ K | 色 8
2021/8/2 1:01 更新