path: root/files/de/web/css/containing_block/index.html

---
title: Layout und der enthaltende Block
slug: Web/CSS/Containing_block
translation_of: Web/CSS/Containing_block
---
<div>{{cssref}}</div>

<p>The size and position of an element are often impacted by its <strong>containing block</strong>. Most often, the containing block is the <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#content-area">content area</a> of an element's nearest <a href="/en-US/docs/Web/HTML/Block-level_elements">block-level</a> ancestor, but this is not always the case. <span class="seoSummary">In this article, we examine the factors that determine an element's containing block.</span></p>

<p>When a user agent (such as your browser) lays out a document, it generates a box for every element. Each box is divided into four areas:</p>

<ol start="1">
 <li>Content area</li>
 <li>Padding area</li>
 <li>Border area</li>
 <li>Margin area</li>
</ol>

<p><img alt="Diagram of the box model" src="https://mdn.mozillademos.org/files/16558/box-model.png" style="height: 300px; width: 544px;"></p>

<p>Many developers believe that the containing block of an element is always the content area of its parent, but that isn't necessarily true. Let's investigate the factors that determine what an element's containing block is.</p>

<h2 id="Effects_of_the_containing_block">Effects of the containing block</h2>

<p>Before learning what determines the containing block of an element, it's useful to know why it matters in the first place.</p>

<p>The size and position of an element are often impacted by its containing block. Percentage values that are applied to the {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("padding")}}, {{cssxref("margin")}}, and offset properties of an absolutely positioned element (i.e., which has its {{cssxref("position")}} set to <code>absolute</code> or <code>fixed</code>) are computed from the element's containing block.</p>

<h2 id="Identifying_the_containing_block">Identifying the containing block</h2>

<p>The process for identifying the containing block depends entirely on the value of the element's {{cssxref("position")}} property:</p>

<ol start="1">
 <li>If the <code>position</code> property is <code><strong>static</strong></code>, <code><strong>relative</strong></code>, or <strong><code>sticky</code></strong>, the containing block is formed by the edge of the <em>content box</em> of the nearest ancestor element that is either <strong>a block container</strong> (such as an inline-block, block, or list-item element) or <strong>establishes a formatting context</strong> (such as a table container, flex container, grid container, or the block container itself).</li>
 <li>If the <code>position</code> property is <code><strong>absolute</strong></code>, the containing block is formed by the edge of the <em>padding box</em> of the nearest ancestor element that has a <code>position</code> value other than <code>static</code> (<code>fixed</code>, <code>absolute</code>, <code>relative</code>, or <code>sticky</code>).</li>
 <li>If the <code>position</code> property is <code><strong>fixed</strong></code>, the containing block is established by the {{glossary("viewport")}} (in the case of continuous media) or the page area (in the case of paged media).</li>
 <li>If the <code>position</code> property is <code><strong>absolute</strong></code> or <code><strong>fixed</strong></code>, the containing block may also be formed by the edge of the <em>padding box</em> of the nearest ancestor element that has the following:
  <ol start="1">
   <li>A {{cssxref("transform")}} or {{cssxref("perspective")}} value other than <code>none</code></li>
   <li>A {{cssxref("will-change")}} value of <code>transform</code> or <code>perspective</code></li>
   <li>A {{cssxref("filter")}} value other than <code>none</code> or a <code>will-change</code> value of <code>filter</code> (only works on Firefox).</li>
   <li>A {{cssxref("contain")}} value of <code>paint</code> (e.g. <code>contain: paint;</code>)</li>
  </ol>
 </li>
</ol>

<div class="note">
<p><strong>Note:</strong> The containing block in which the root element ({{HTMLElement("html")}}) resides is a rectangle called the <strong>initial containing block</strong>. It has the dimensions of the viewport (for continuous media) or the page area (for paged media).</p>
</div>

<h2 id="Calculating_percentage_values_from_the_containing_block">Calculating percentage values from the containing block</h2>

<p>As noted above, when certain properties are given a percentage value, the computed value depends on the element's containing block. The properties that work this way are <strong>box model properties</strong> and <strong>offset properties</strong>:</p>

<ol start="1">
 <li>The {{cssxref("height")}}, {{cssxref("top")}}, and {{cssxref("bottom")}} properties compute percentage values from the <code>height</code> of the containing block.</li>
 <li>The {{cssxref("width")}}, {{cssxref("left")}}, {{cssxref("right")}}, {{cssxref("padding")}}, and {{cssxref("margin")}} properties compute percentage values from the <code>width</code> of the containing block.</li>
</ol>

<h2 id="Some_examples">Some examples</h2>

<p>The HTML code for all our examples is:</p>

<pre class="brush: html notranslate">&lt;body&gt;
  &lt;section&gt;
    &lt;p&gt;This is a paragraph!&lt;/p&gt;
  &lt;/section&gt;
&lt;/body&gt;
</pre>

<p>Only the CSS is altered in each instance below.</p>

<h3 id="Example_1">Example 1</h3>

<p>In this example, the paragraph is statically positioned, so its containing block is {{HTMLElement("section")}} because it's the nearest ancestor that is a block container.</p>

<div class="hidden">
<pre class="brush: html notranslate">&lt;body&gt;
  &lt;section&gt;
    &lt;p&gt;This is a paragraph!&lt;/p&gt;
  &lt;/section&gt;
&lt;/body&gt;
</pre>
</div>

<pre class="brush: css notranslate">body {
  background: beige;
}

section {
  display: block;
  width: 400px;
  height: 160px;
  background: lightgray;
}

p {
  width: 50%;   /* == 400px * .5 = 200px */
  height: 25%;  /* == 160px * .25 = 40px */
  margin: 5%;   /* == 400px * .05 = 20px */
  padding: 5%;  /* == 400px * .05 = 20px */
  background: cyan;
}
</pre>

<p>{{EmbedLiveSample('Example_1','100%','300')}}</p>

<h3 id="Example_2">Example 2</h3>

<p>In this example, the paragraph's containing block is the {{HTMLElement("body")}} element, because <code>&lt;section&gt;</code> is not a block container (because of <code>display: inline</code>) and doesn’t establish a formatting context.</p>

<div class="hidden">
<pre class="brush: html notranslate">&lt;body&gt;
  &lt;section&gt;
    &lt;p&gt;This is a paragraph!&lt;/p&gt;
  &lt;/section&gt;
&lt;/body&gt;
</pre>
</div>

<pre class="brush: css notranslate">body {
  background: beige;
}

section {
  display: inline;
  background: lightgray;
}

p {
  width: 50%;     /* == half the body's width */
  height: 200px;  /* Note: a percentage would be 0 */
  background: cyan;
}
</pre>

<p>{{EmbedLiveSample('Example_2','100%','300')}}</p>

<h3 id="Example_3">Example 3</h3>

<p>In this example, the paragraph's containing block is <code>&lt;section&gt;</code> because the latter's <code>position</code> is <code>absolute</code>. The paragraph's percentage values are affected by the <code>padding</code> of its containing block, though if the containing block's {{cssxref("box-sizing")}} value were <code>border-box</code> this would not be the case.</p>

<div class="hidden">
<pre class="brush: html notranslate">&lt;body&gt;
  &lt;section&gt;
    &lt;p&gt;This is a paragraph!&lt;/p&gt;
  &lt;/section&gt;
&lt;/body&gt;
</pre>
</div>

<pre class="brush: css notranslate">body {
  background: beige;
}

section {
  position: absolute;
  left: 30px;
  top: 30px;
  width: 400px;
  height: 160px;
  padding: 30px 20px;
  background: lightgray;
}

p {
  position: absolute;
  width: 50%;   /* == (400px + 20px + 20px) * .5 = 220px */
  height: 25%;  /* == (160px + 30px + 30px) * .25 = 55px */
  margin: 5%;   /* == (400px + 20px + 20px) * .05 = 22px */
  padding: 5%;  /* == (400px + 20px + 20px) * .05 = 22px */
  background: cyan;
}
</pre>

<p>{{EmbedLiveSample('Example_3','100%','300')}}</p>

<h3 id="Example_4">Example 4</h3>

<p>In this example, the paragraph's <code>position</code> is <code>fixed</code>, so its containing block is the initial containing block (on screens, the viewport). Thus, the paragraph's dimensions change based on the size of the browser window.</p>

<div class="hidden">
<pre class="brush: html notranslate">&lt;body&gt;
  &lt;section&gt;
    &lt;p&gt;This is a paragraph!&lt;/p&gt;
  &lt;/section&gt;
&lt;/body&gt;
</pre>
</div>

<pre class="brush: css notranslate">body {
  background: beige;
}

section {
  width: 400px;
  height: 480px;
  margin: 30px;
  padding: 15px;
  background: lightgray;
}

p {
  position: fixed;
  width: 50%;   /* == (50vw - (width of vertical scrollbar)) */
  height: 50%;  /* == (50vh - (height of horizontal scrollbar)) */
  margin: 5%;   /* == (5vw - (width of vertical scrollbar)) */
  padding: 5%;  /* == (5vw - (width of vertical scrollbar)) */
  background: cyan;
}
</pre>

<p>{{EmbedLiveSample('Example_4','100%','300')}}</p>

<h3 id="Example_5">Example 5</h3>

<p>In this example, the paragraph's <code>position</code> is <code>absolute</code>, so its containing block is <code>&lt;section&gt;</code>, which is the nearest ancestor with a {{cssxref("transform")}} property that isn't <code>none</code>.</p>

<div class="hidden">
<pre class="brush: html notranslate">&lt;body&gt;
  &lt;section&gt;
    &lt;p&gt;This is a paragraph!&lt;/p&gt;
  &lt;/section&gt;
&lt;/body&gt;
</pre>
</div>

<pre class="brush: css notranslate">body {
  background: beige;
}

section {
  transform: rotate(0deg);
  width: 400px;
  height: 160px;
  background: lightgray;
}

p {
  position: absolute;
  left: 80px;
  top: 30px;
  width: 50%;   /* == 200px */
  height: 25%;  /* == 40px */
  margin: 5%;   /* == 20px */
  padding: 5%;  /* == 20px */
  background: cyan;
}
</pre>

<p>{{EmbedLiveSample('Example_5','100%','300')}}</p>

<h2 id="See_also">See also</h2>

<ul>
 <li>{{css_key_concepts}}</li>
 <li>The {{cssxref("all")}} property resets all CSS declarations to a given known state</li>
</ul>