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

CSSposition

position:absolute;

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

何が問題なの?


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


position:absolute;

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

 閲覧数:323 投稿日: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 StableDiffusionのweb版「DreamStudio」を使用してみた感想。それなりに楽しめましたが、課金してまで使用してみたいとは思いませんでした。 24
9 「文春オンライン」に掲載されている画像を「Google Chrome」ブラウザでダウンロードするためには、chrome拡張機能「Absolute Enable Right Click & Copy」を使用します。 24
10 「position:absolute;」が分からなくなったときに見るエントリー 24
11 Google Chrome™ デベロッパーツールで表示できないスマホ画面を確認するためには、「mobile browser emulator」を使用 24
12 CSS3-mediaqueries.jsは、@ importスタイルシートに記述した内容を反映しない 23
13 ページ内リンクの位置を微調整するためには、Negative margin を使用する 23
14 「Google Chrome」を経由したダウンロード個人ルール。「HTTrack Website Copier」とパッケージ化されていない拡張機能「Save As MHT 20220426」の 2 種類 23
15 Chromeで閲覧している任意URLのhtmlタグに対して、なるべく簡単に「html{font-size:0.1em!important;}」を追加したい 23
16 「Illustrator CS3」 で「SVG トリミング出力」するためには、「トリムエリアツール」ではなく「アートボードの大きさ」を「オブジェクトサイズ」へ変更した後出力 23
17 bootstrap3で意図せず横スクロールバーが表示される場合は、containerクラスの入れ子を疑う 23
18 「Google Chrome」で「このページは動作していません xxxx.net でリダイレクトが繰り返し行われました。 Cookie を消去してみてください.」と表示されるWebサイトには、「Microsoft Edge」でアクセスしてみる 23
19 「Google Chrome」でタブをどうしてもたくさん開かなければならない場合は、「すべてのタブをブックマークに追加」後、「ブックマークマネージャ」で(分割などの)整理を行う 23
20 「display:inline-block;」指定した要素の直後を改行するためには、「display:inline-block;」自体を「display:table;」へ変更します。 23
2023/2/05 7:25 更新
週間人気ページランキング / 1-29 → 2-4
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 49
2 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 38
3 「bgcolor」「background-color」「background」の違い | CSS 34
4 血の色 / #b30000 / #360800 / #ff0000 | カラーコード(色) 25
5 RGBの種類 / ビットカラー | RGB(色) 20
6 「属性」「プロパティ」「アトリビュート」の違い | CSS 18
6 Design 0 18
7 「東京都」のカラーコード取得は難しい | カラーコード(色) 17
8 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 16
9 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 15
9 Chrome でキャッシュを効かさない | Google Chrome(ブラウザ) 15
10 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 14
11 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 13
11 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 13
11 「:after擬似要素」は、Chromeの「要素を検証」で確認できない | 擬似(CSS) 13
11 ICCプロファイル | カラーマネージメント(色) 13
11 HSLとHSVの違い | 色変換(色) 13
11 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 13
12 max-width: 100%の効果を打ち消すには、max-width: none; | CSS 12
13 GIMPで「レイヤーとして開く」を選択した画像、の位置情報(x,y)を表示させる方法が分からない | GIMP 系(ソフトウェア) 11
2023/2/5 1:01 更新