親のパディングを無視した絶対配置

173

絶対配置要素にその親のパディングをどのように反映させるのですか？内側のdivをその親の幅全体に広げて、その親の下部、基本的にはフッターに配置する必要があります。しかし、子供は親のパディングを尊重する必要があり、それはそれをしていません。子は親の端に押し付けられます。

だから私はこれが欲しい：

ここに画像の説明を入力してください

しかし、私はこれを手に入れています：

ここに画像の説明を入力してください

<html>
  <body>
    <div style="background-color: blue; padding: 10px; position: relative; height: 100px;">
      <div style="background-color: gray; position: absolute; left: 0px; right: 0px; bottom: 0px;">css sux</div>
    </div>
  </body>
</html>

内側のdivの周りにマージンを設けることもできますが、追加する必要はありません。

css padding css-position

— d512
ソース

5

内部divの左/右/下を変更しないのはなぜstyle="background-color: gray; position: absolute; left: 10px; right: 10px; bottom: 10px;"ですか？

— j08691 2013年

12

ええ、私はそれを考えましたが、すべての子供がそれを説明するために独自のオフセットのセットを持たなければならないので、それはすぐにメンテナンスの頭痛になります。彼らが親のパディングを尊重するだけであれば、親に一度設定するだけで、すべての子について心配する必要はありません。

— d512 2013年

上記で指摘したように、（相対位置の）親のパディングの値をleft:およびright:（絶対位置の）子として使用すると、問題は解決します。私はこのb / cを追加します。これは、同じ問題を持つ他の人が探している可能性が高い答えです。

— rda3000 2013年

ここに同様の問題があります：jsfiddle.net/5n4By/6。フッターは親の左側のパディングを尊重していますが、右側ではオーバーフローしています。適切なパディングを尊重し、一貫性を保つことが期待されます...

— rafiki_rafi 2013

186

まず、これが起こっている理由を見てみましょう。

その理由は、驚くべきことに、ボックスにposition: absoluteその包含ボックスがある場合、親のパディングボックス（つまり、パディングの周囲のボックス）になるためです。通常（つまり、静的または相対配置を使用している場合）格納ボックスは親のコンテンツボックスであるため、これは驚くべきことです。

ここでCSS仕様の関連部分は：

祖先がインライン要素である場合、包含ブロックは、その要素に対して生成された最初と最後のインラインボックスのパディングボックスの周囲の境界ボックスです。それ以外の場合、包含ブロックはのパディングエッジによって形成されます。祖先。

Winterの回答で示唆されているように、最も単純なアプローチはpadding: inherit、絶対配置で使用することdivです。ただし、絶対位置divに独自のパディングを追加したくない場合にのみ機能します。（両方の要素が独自の独立したパディングを持つことができるという点で）最も汎用的なソリューションは次のとおりです。

div絶対配置されたの周囲に、相対的に配置された（パディングなしの）追加の余白を追加しますdiv。その新しいものdivは、その親のパディングを尊重し、絶対に配置divされたものがそれを埋めます。

もちろん、欠点は、単にプレゼンテーションの目的でHTMLをいじっていることです。
絶対配置された要素でパディングを繰り返します（またはそれに追加します）。

ここでの欠点は、CSSで値を繰り返す必要があることです。これは、CSSを直接作成している場合は脆弱です。しかし、あなたのような前処理ツールを使用している場合SASS、またはLESSあなたは、変数を使用することによって、その問題を回避することができます。これは私が個人的に使用している方法です。

— ケビン・クリストファー・ヘンリー
ソース

なぜこれがデフォルトなのposition: absoluteですか？含まれているボックスがパディングボックスであることは驚くべきことですがbox-sizing、width＆heightがパディングまたはボーダーを含まない（がない）理由があると確信しているように、その理由があったはずです。

— トリシス

1

単なる追加：これはbox-sizing、親または子のプロパティの影響を受けません。これは、幅/高さのようにサイズ変更に影響しますが、包含ボックスには影響しないためです。

— トリシス

2

これは良い情報ですが、間違った答えです。正解は以下のWinterです。...パディングを使用：継承すると、Absolute要素が必要なパディングを取得します。なぜこれが正解よりも賛成票があるのかわからない...：P

— NotaGuruAtAll

1

@NotaGuruAtAll：padding: inherit絶対配置divが独自のパディングを必要としない場合にうまく機能し、そのテクニックについての言及を追加しました。ただし、絶対位置に追加のパディングを追加できないためdiv（つまり、とは言えないため）、柔軟性が低くなりますpadding: inherit + 5px。そのため、ここで説明する手法を好みます。

— ケビンクリストファーヘンリー

1

position:absolute親のパディングを尊重する子を探しているだけの場合、子要素の継承のパディングは実際に機能します。あなたが追加する探している場合は、追加の子にパディングを、あなたのコードのチェックにパディングの比率を維持する必要があります。CSSだけでそれを行うための明確な方法はありません。

— ディランピアース

51

あなたが試すことができる1つのことは、次のCSSを使用することです：

.child-element {
    padding-left: inherit;
    padding-right: inherit;
    position: absolute;
    left: 0;
    right: 0;
}

子要素が親からパディングを継承できるようにしてから、子を親の幅とパディングに一致するように配置できます。

また、box-sizing: border-box;関連する要素に使用しています。

これをすべてのブラウザでテストしたわけではありませんが、Chrome、Firefox、IE10で動作しているようです。

— 冬
ソース

この回答と@NewSpenderの回答を組み合わせました。私の特定のケースでは、絶対配置されたdivはパディングを無視し続けましたが、その親要素によって制限されていました。したがって、白い太い境界線を持つ絶対位置のdivを指定すると、必要なパディングが模倣されます。ただし、背景は同じ色である必要があります。

— Ogier Schelvis 2017

しかし、OPは子が親のパディングを継承することを望んでいません。彼は、子が親のパディングに従ってオフセットされることを望んでいます。

— Michael Gummelt

30

まあ、これは（意味的に）最もエレガントな解決策ではないかもしれませんが、場合によっては欠点なしで機能します。パディングの代わりに、親要素で透明な境界線を使用します。絶対配置された子要素は境界線を尊重し、完全に同じにレンダリングされます（スタイル設定に親要素の境界線を使用している場合を除く）。

— NewSpender
ソース

8

親divでパディングの代わりにマージンを使用する：http : //blog.vjeux.com/2012/css/css-absolute-position-taking-into-account-padding.html

— ニロック
ソース

背景（色）はパディングのようにマージンには適用されないことに注意してください

— Paul

6

これが私のベストショットです。別のDivを追加して赤にし、テストするために親の高さを200pxに変更しました。子供が孫になり、親が祖父母になるという考え方です。したがって、親はその親を尊重します。あなたが私の考えを理解してくれることを願っています。

<html>
  <body>
    <div style="background-color: blue; padding: 10px; position: relative; height: 200px;">
     <div style="background-color: red;  position: relative; height: 100%;">    
        <div style="background-color: gray; position: absolute; left: 0px; right: 0px;bottom: 0px;">css sux</div>
     </div>
    </div>
  </body>
</html>

編集：

あなたがやろうとしていることはできないと思います。絶対的な位置とは、それを尊重しなければならないコーディネートを与えることを意味します。親に5pxのパディングがある場合はどうなりますか。そして、あなたは絶対に子を上に配置します：-5px; 左：-5px。親とあなたを同時に尊敬するとはどういう意味ですか？

私の解決策

親に敬意を表したい場合は、絶対に配置しないでください。

— 接する
ソース

ありがとう、私は投稿に感謝しますが、それでも本当の問題の回避策です。私が本当に知りたいのは、子供に親要素のパディングを尊重してもらえるかどうかです。答えが「いいえ」であることが判明した場合は、担当者にお渡しします。

— d512 2013年

それらを絶対的に配置した場合、それらは親要素を尊重しません。彼らはあなたを尊敬します。同じ理由で、それらを絶対的に配置しないと、bottom：10pxなどは親要素を尊重するため、実際には使用できません。しかし、あなたが何をしたいのか、私は矛盾の余地を作ると思うので、それはブラウザによって異なります。回避策だけで十分だと思います。

— 2013年

3

絶対配置では、親が使用する座標系を尊重します。top 0pxと言うと、親の上部から0px離れていることを意味します。問題は、親のパディングを考慮に入れるかどうかです。親が5pxのパディングを持っていて、子にtop：-5pxを与えた場合、親のパディングが守られていれば親と同じ高さになり、そうでなければ親の上に5pxが置かれます。

— d512 2013年

3

1.）親に大きなボーダーを使用することはできません-特定のボーダーが必要な場合

2.）マージンを追加できません-親が他のコンテナの一部であり、親に完全に取らせたい場合その祖父母の幅。

適用できる唯一のソリューションは、別のコンテナで子供をラップして、親が祖父母になるようにし、新しい子供用のラッパー/親にパディングを適用することです。または、子供に直接パディングを適用することもできます。

あなたの場合：

.css-sux{
  padding: 0px 10px 10px 10px;
}

— bhavya_w
ソース

1

余分なレベルのDivを使用して簡単に行うことができます。

<div style="background-color: blue; padding: 10px; position: relative; height: 100px;">
  <div style="position: absolute; left: 0px; right: 0px; bottom: 10px; padding:0px 10px;">
    <div style="background-color: gray;">css sux</div>
  </div>
</div>

デモ：https : //jsfiddle.net/soxv3vr0/

— Asankasri
ソース

0

パディングを追加：絶対位置に継承

.box{
  background: red;
  position: relative;
  padding: 30px;
  width:500px;
  height:200px;
 box-sizing: border-box;
 

}

<div  class="box">

  <div style="position: absolute;left:0;top:0;padding: inherit">top left</div>
  <div style="position: absolute;right:0;top:0;padding: inherit">top right</div>
  <div style="text-align: center;padding: inherit">center</div>
  <div style="position: absolute;left:0;bottom:0;padding: inherit">bottom left</div>
  <div style="position: absolute;right:0;bottom:0;padding: inherit">bottom right</div>


</div>

スニペットを展開

— ßãlãjî
ソース