web-dev-qa-db-ja.com

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

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

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

enter image description here

しかし、私はこれを取得しています：

enter image description here

<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の周りにマージンを設けて実現できますが、追加する必要はありません。

csspaddingcss-position
151
d512

まず、なぜこれが起こっているのか見てみましょう。

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

CSS仕様の関連部分 は次のとおりです。

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

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

  1. 絶対的に配置されたdivの周りに、余分に配置されたdiv（パディングなし）を追加します。その新しいdivはその親のパディングを尊重し、絶対位置にあるdivがそれを埋めます。

    もちろん、デメリットは、単にプレゼンテーション目的でHTMLをいじっているということです。

  2. 絶対位置の要素でパディングを繰り返します（または追加します）。

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

158
Kevin Christopher Henry

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

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

子要素が親からパディングを継承できるようにします。その後、子を親とパディングに合わせて配置できます。

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

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

43
Winter

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

28
NewSpender

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

7
Niloct

これが私のベストショットです。別のDivを追加して赤にし、テストのために親の高さを200ピクセルに変更しました。アイデアは、子が孫になり、親が祖父母になることです。したがって、親はその親を尊重します。あなたが私のアイデアを得ることを願っています。

<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のパディングがある場合はどうなりますか。そして、あなたは絶対に子をtop：-5px; left：-5pxに配置します。親とあなたを同時に尊敬するのはどうですか？

私の解決策

親を尊重する場合は、絶対に配置しないでください。

5
Touch

1.）親に大きな境界線を使用することはできません-特定の境界線が必要な場合に備えて

2。）マージンを追加することはできません-親が他のコンテナの一部であり、親にその親の全幅を使用させたい場合。

適用可能な唯一の解決策は、親が祖父母になり、新しい子のラッパー/親にパディングを適用するように、子を別のコンテナにラップすることです。または、子に直接パディングを適用できます。

あなたの場合：

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

余分なレベルの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/

0
asankasri