move containing block

files/en-us/_redirects.txt

@@ -11811,7 +11811,7 @@
 /en-US/docs/Web/CSS/Adjacent_sibling_combinator	/en-US/docs/Web/CSS/Next-sibling_combinator
 /en-US/docs/Web/CSS/Adjacent_sibling_selectors	/en-US/docs/Web/CSS/Next-sibling_combinator
 /en-US/docs/Web/CSS/Alias	/en-US/docs/Web/CSS/cursor
-/en-US/docs/Web/CSS/All_About_The_Containing_Block	/en-US/docs/Web/CSS/Containing_block
+/en-US/docs/Web/CSS/All_About_The_Containing_Block	/en-US/docs/Web/CSS/CSS_display/Containing_block
 /en-US/docs/Web/CSS/Aural	/en-US/docs/Web/CSS/@media/aural
 /en-US/docs/Web/CSS/Block_formatting_context	/en-US/docs/Web/CSS/CSS_display/Block_formatting_context
 /en-US/docs/Web/CSS/CSS3_Columns	/en-US/docs/Web/CSS/CSS_multicol_layout/Using_multicol_layouts
@@ -11943,6 +11943,7 @@
 /en-US/docs/Web/CSS/Child_selectors	/en-US/docs/Web/CSS/Child_combinator
 /en-US/docs/Web/CSS/Common_CSS_Questions	/en-US/docs/Learn_web_development/Howto/Solve_CSS_problems/CSS_FAQ
 /en-US/docs/Web/CSS/Compositing_and_Blending	/en-US/docs/Web/CSS/CSS_compositing_and_blending
+/en-US/docs/Web/CSS/Containing_block	/en-US/docs/Web/CSS/CSS_display/Containing_block
 /en-US/docs/Web/CSS/Currentcolor	/en-US/docs/Web/CSS/color_value#currentcolor_keyword
 /en-US/docs/Web/CSS/Descendant_selectors	/en-US/docs/Web/CSS/Descendant_combinator
 /en-US/docs/Web/CSS/Draft_Implementations_of_CSS_Features	/en-US/docs/Web/CSS/Mozilla_Extensions

files/en-us/_wikihistory.json

@@ -76424,6 +76424,23 @@
       "DBaron"
     ]
   },
+  "Web/CSS/CSS_display/Containing_block": {
+    "modified": "2020-10-17T13:39:05.533Z",
+    "contributors": [
+      "mfuji09",
+      "chrisdavidmills",
+      "alattalatta",
+      "nsangwan",
+      "gregprice",
+      "mustafasalah",
+      "Konrud",
+      "CaTmmao",
+      "Sheppy",
+      "tshinnic",
+      "mfluehr",
+      "Gwyn"
+    ]
+  },
   "Web/CSS/CSS_display/Flow_layout_and_overflow": {
     "modified": "2020-06-24T00:31:43.651Z",
     "contributors": ["mfuji09", "estelle", "rachelandrew"]
@@ -77922,23 +77939,6 @@
       "McGurk"
     ]
   },
-  "Web/CSS/Containing_block": {
-    "modified": "2020-10-17T13:39:05.533Z",
-    "contributors": [
-      "mfuji09",
-      "chrisdavidmills",
-      "alattalatta",
-      "nsangwan",
-      "gregprice",
-      "mustafasalah",
-      "Konrud",
-      "CaTmmao",
-      "Sheppy",
-      "tshinnic",
-      "mfluehr",
-      "Gwyn"
-    ]
-  },
   "Web/CSS/Descendant_combinator": {
     "modified": "2020-10-15T21:04:18.445Z",
     "contributors": [

files/en-us/glossary/inset_properties/index.md

@@ -12,11 +12,11 @@ The inset properties include the {{cssxref("top")}}, {{cssxref("left")}}, {{cssx
 
 **Physical properties** reference specific physical sides of an element. Logical properties use directional keywords relative to the block and inline axes. **Block axis** refers to the axis that defines the stacking order of elements in a block layout. The **inline axis** is perpendicular to the block axis, representing the direction along which inline content like text flows within a block. The mapping depends on the element's {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}.
 
-The interpretation of inset properties depends on the value of the {{cssxref("position")}} property. When `position: absolute` is set, they represent insets from the [containing block](/en-US/docs/Web/CSS/Containing_block) or [anchor element](/en-US/docs/Web/CSS/CSS_anchor_positioning/Using). With `position: relative`, they represent insets from the box's default margin edge position. With `sticky`, they represent insets from the {{glossary("scroll container")}} edge. The `fixed` value is similar to `absolute`, except the element is positioned and sized relative to its fixed positioning containing block, which is often the viewport.
+The interpretation of inset properties depends on the value of the {{cssxref("position")}} property. When `position: absolute` is set, they represent insets from the [containing block](/en-US/docs/Web/CSS/CSS_display/Containing_block) or [anchor element](/en-US/docs/Web/CSS/CSS_anchor_positioning/Using). With `position: relative`, they represent insets from the box's default margin edge position. With `sticky`, they represent insets from the {{glossary("scroll container")}} edge. The `fixed` value is similar to `absolute`, except the element is positioned and sized relative to its fixed positioning containing block, which is often the viewport.
 
 ## See also
 
-- [Layout and the containing block](/en-US/docs/Web/CSS/Containing_block)
+- [Layout and the containing block](/en-US/docs/Web/CSS/CSS_display/Containing_block)
 - [CSS positioned layout](/en-US/docs/Web/CSS/CSS_positioned_layout) module
 - [CSS logical properties and values](/en-US/docs/Web/CSS/CSS_logical_properties_and_values) module
 - [CSS anchor positioning](/en-US/docs/Web/CSS/CSS_anchor_positioning) module

files/en-us/web/api/htmlelement/offsetparent/index.md

@@ -14,7 +14,7 @@ positioned ancestor element.
 
 A positioned ancestor might be:
 
-- a [containing block](/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block) for absolutely-positioned elements
+- a [containing block](/en-US/docs/Web/CSS/CSS_display/Containing_block#identifying_the_containing_block) for absolutely-positioned elements
 - an element with a different effective [zoom](/en-US/docs/Web/CSS/zoom) value (that is, the product of all zoom scales of its parents) from this element
 - `td`, `th`, `table` in case the element itself is static positioned.
 

files/en-us/web/css/@media/overflow-block/index.md

@@ -7,7 +7,7 @@ browser-compat: css.at-rules.media.overflow-block
 
 {{CSSRef}}
 
-The **`overflow-block`** [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/@media#media_features) can be used to test how the output device handles content that overflows the initial [containing block](/en-US/docs/Web/CSS/Containing_block) along the block axis.
+The **`overflow-block`** [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/@media#media_features) can be used to test how the output device handles content that overflows the initial [containing block](/en-US/docs/Web/CSS/CSS_display/Containing_block) along the block axis.
 
 > [!NOTE]
 > The `overflow-block` property does not determine whether overflow occurs; rather, it reveals the device's handling of such overflow. Typically, on screens in most browsers, the behavior will be "scroll": when content exceeds the available vertical space, the device allows you to scroll to access the overflowed content.

files/en-us/web/css/@media/overflow-inline/index.md

@@ -7,7 +7,7 @@ browser-compat: css.at-rules.media.overflow-inline
 
 {{CSSRef}}
 
-The **`overflow-inline`** [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/@media#media_features) can be used to test how the output device handles content that overflows the initial [containing block](/en-US/docs/Web/CSS/Containing_block) along the inline axis.
+The **`overflow-inline`** [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/@media#media_features) can be used to test how the output device handles content that overflows the initial [containing block](/en-US/docs/Web/CSS/CSS_display/Containing_block) along the inline axis.
 
 > [!NOTE]
 > The `overflow-inline` property does not determine whether overflow occurs; rather, it reveals the device's handling of such overflow. Typically, on screens in most browsers, the behavior will be "scroll": when content exceeds the available horizontal space, the device allows you to scroll to access the overflowed content.

files/en-us/web/css/anchor-name/index.md

@@ -46,7 +46,7 @@ The anchor element accepts one or more `<dashed-ident>` anchor names set on it v
 
 If multiple anchor elements have the same anchor name set on them, and that name is referenced by the `position-anchor` property value of a positioned element, that positioned element will be associated with the last anchor element with that anchor name in the source order.
 
-Anchor positioning changes the [containing block](/en-US/docs/Web/CSS/Containing_block) of anchor-positioned elements, making its `position` relative to its anchor rather than to the nearest positioned ancestor element.
+Anchor positioning changes the [containing block](/en-US/docs/Web/CSS/CSS_display/Containing_block) of anchor-positioned elements, making its `position` relative to its anchor rather than to the nearest positioned ancestor element.
 
 To tether and place a positioned element in a specific location relative to an anchor element, an anchor positioning feature is needed, such as the {{cssxref("anchor()")}} function (set within an {{glossary("inset properties", "inset property's")}} value) or the {{cssxref("position-area")}} property.
 

files/en-us/web/css/anchor-size/index.md

@@ -69,7 +69,7 @@ The parameters are:
 
     - `block`
 
-      - : The length of the anchor element's [containing block](/en-US/docs/Web/CSS/Containing_block) in the block direction.
+      - : The length of the anchor element's [containing block](/en-US/docs/Web/CSS/CSS_display/Containing_block) in the block direction.
 
     - `inline`
 

files/en-us/web/css/anchor/index.md

@@ -60,7 +60,7 @@ The parameters are:
     - `left`
       - : The left of the anchor element
     - `start`
-      - : The logical start of the anchor element's [containing block](/en-US/docs/Web/CSS/Containing_block) along the axis of the inset property on which the `anchor()` function is set.
+      - : The logical start of the anchor element's [containing block](/en-US/docs/Web/CSS/CSS_display/Containing_block) along the axis of the inset property on which the `anchor()` function is set.
     - `end`
       - : The logical end of the anchor element's containing block along the axis of the inset property on which the `anchor()` function is set.
     - `self-start`

files/en-us/web/css/contain/index.md

@@ -22,7 +22,7 @@ Using the `contain` property is useful on pages with groups of elements that are
 > [!NOTE]
 > Using `layout`, `paint`, `strict` or `content` values for this property creates:
 >
-> 1. A new [containing block](/en-US/docs/Web/CSS/Containing_block) (for the descendants whose {{cssxref("position")}} property is `absolute` or `fixed`).
+> 1. A new [containing block](/en-US/docs/Web/CSS/CSS_display/Containing_block) (for the descendants whose {{cssxref("position")}} property is `absolute` or `fixed`).
 > 2. A new [stacking context](/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context).
 > 3. A new [block formatting context](/en-US/docs/Web/CSS/CSS_display/Block_formatting_context).
 

files/en-us/web/css/css_anchor_positioning/using/index.md

@@ -306,7 +306,7 @@ The grid tiles are broken up into rows and columns:
 - The three rows are represented by the physical values `top`, `center`, and `bottom`. They also have logical equivalents such as `start`, `center`, and `end`, and coordinate equivalents such as `y-start`, `center`, and `y-end`.
 - The three columns are represented by the physical values `left`, `center`, and `right`. They also have logical equivalents such as `start`, `center`, and `end`, and coordinate equivalents such as `x-start`, `center`, and `x-end`.
 
-The dimensions of the center tile are defined by the [containing block](/en-US/docs/Web/CSS/Containing_block) of the anchor element, while the distance between the center tile and the grid's outer edge is defined by the positioned element's containing block.
+The dimensions of the center tile are defined by the [containing block](/en-US/docs/Web/CSS/CSS_display/Containing_block) of the anchor element, while the distance between the center tile and the grid's outer edge is defined by the positioned element's containing block.
 
 `position-area` property values are composed of one or two values based on the row and column values described above, with spanning options available to define the region of the grid where the element should positioned.
 
@@ -469,7 +469,7 @@ Try selecting new `position-area` values from the `<select>` menu to see the eff
 
 In the above example, we did not explicitly size the positioned element in either dimension. We deliberately omitted sizing to allow you to observe the behavior this causes.
 
-When a positioned element is placed into `position-area` grid cells without explicit sizing, it aligns with the grid area specified and behaves as if {{cssxref("width")}} were set to {{cssxref("max-content")}}. It is sized according to its [containing block](/en-US/docs/Web/CSS/Containing_block) size, which is the width of its content. This size was imposed by setting `position: fixed`. Auto-sized absolutely and fixed-positioned elements are automatically sized, stretching as wide as needed to fit the text content, while constrained by the edge of the viewport. In this case, when placed on the left side of the grid with any `left` or `inline-start` value, the text wraps. If the anchored element's `max-content` size is narrower or shorter than its anchor, they won't grow to match the size of the anchor.
+When a positioned element is placed into `position-area` grid cells without explicit sizing, it aligns with the grid area specified and behaves as if {{cssxref("width")}} were set to {{cssxref("max-content")}}. It is sized according to its [containing block](/en-US/docs/Web/CSS/CSS_display/Containing_block) size, which is the width of its content. This size was imposed by setting `position: fixed`. Auto-sized absolutely and fixed-positioned elements are automatically sized, stretching as wide as needed to fit the text content, while constrained by the edge of the viewport. In this case, when placed on the left side of the grid with any `left` or `inline-start` value, the text wraps. If the anchored element's `max-content` size is narrower or shorter than its anchor, they won't grow to match the size of the anchor.
 
 If the positioned element is centered vertically, such as with `position-area: bottom center`, it will align with the grid cell specified and the width will be the same as the anchor element. In this case, its minimum height is the anchor element's containing block size. It will not overflow, as the `min-width` is {{cssxref("min-content")}}, meaning it will be at least as wide as its longest word.
 

files/en-us/web/css/css_box_model/introduction_to_the_css_box_model/index.md

@@ -40,7 +40,7 @@ Finally, note that for non-replaced inline elements, the amount of space taken u
 
 ## See also
 
-- [Layout and the containing block](/en-US/docs/Web/CSS/Containing_block)
+- [Layout and the containing block](/en-US/docs/Web/CSS/CSS_display/Containing_block)
 - [Introducing the CSS Cascade](/en-US/docs/Web/CSS/Cascade)
 - [Learn: Handling conflicts](/en-US/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts)
 - CSS key concepts:

files/en-us/web/css/css_containment/index.md

@@ -50,7 +50,7 @@ Container queries are similar to dimension [media queries](/en-US/docs/Web/CSS/C
 
 ## Related concepts
 
-- [Layout and the containing block](/en-US/docs/Web/CSS/Containing_block)
+- [Layout and the containing block](/en-US/docs/Web/CSS/CSS_display/Containing_block)
 - [Block formatting context](/en-US/docs/Web/CSS/CSS_display/Block_formatting_context)
 
 - [CSS conditional rules](/en-US/docs/Web/CSS/CSS_conditional_rules) module

files/en-us/web/css/css_containment/using_css_containment/index.md

@@ -68,7 +68,7 @@ In addition:
 
 - {{cssxref("float")}} layout will be performed independently inside the specified element.
 - Margins won't collapse across a layout containment boundary.
-- The layout container is a [containing block](/en-US/docs/Web/CSS/Containing_block) for `absolute`- and `fixed`-positioned descendants.
+- The layout container is a [containing block](/en-US/docs/Web/CSS/CSS_display/Containing_block) for `absolute`- and `fixed`-positioned descendants.
 - The containing box creates a [stacking context](/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context), therefore {{cssxref("z-index")}} can be used.
 
 > [!NOTE]

files/en-us/web/css/containing_block/index.md → files/en-us/web/css/css_display/containing_block/index.md

@@ -1,6 +1,6 @@
 ---
 title: Layout and the containing block
-slug: Web/CSS/Containing_block
+slug: Web/CSS/CSS_display/Containing_block
 page-type: guide
 ---
 

files/en-us/web/css/css_grid_layout/relationship_of_grid_layout_with_other_layout_methods/index.md

@@ -326,7 +326,7 @@ Grid interacts with [absolutely positioned](/en-US/docs/Web/CSS/position#absolut
 
 ### A grid container as containing block
 
-To make the grid container a [containing block](/en-US/docs/Web/CSS/Containing_block), you need to add the {{cssxref("position")}} property to the container with a value of `relative`, just as you would make a containing block for any other absolutely positioned items. Once you have done this, if you give a grid item `position: absolute` it will take as its containing block the grid container or, if the item also has a grid position, the area of the grid it is placed into.
+To make the grid container a [containing block](/en-US/docs/Web/CSS/CSS_display/Containing_block), you need to add the {{cssxref("position")}} property to the container with a value of `relative`, just as you would make a containing block for any other absolutely positioned items. Once you have done this, if you give a grid item `position: absolute` it will take as its containing block the grid container or, if the item also has a grid position, the area of the grid it is placed into.
 
 In the below example we have a wrapper containing four child items. Item three is absolutely positioned and also placed on the grid using line-based placement. The grid container has `position: relative` and so becomes the positioning context of this item.
 

files/en-us/web/css/css_overscroll_behavior/index.md

@@ -40,7 +40,7 @@ This module defines the overscroll behavior, enabling you to specify the actions
 ## Related concepts
 
 - [`scrollbar`](/en-US/docs/Web/Accessibility/ARIA/Roles/scrollbar_role) ARIA role
-- [Containing block](/en-US/docs/Web/CSS/Containing_block) concept
+- [Containing block](/en-US/docs/Web/CSS/CSS_display/Containing_block) concept
 - [CSS overflow](/en-US/docs/Web/CSS/CSS_overflow) module:
   - {{cssxref("overflow")}} shorthand property
     - {{Cssxref("overflow-x")}}

files/en-us/web/css/height/index.md

@@ -52,7 +52,7 @@ height: unset;
 - {{cssxref("<length>")}}
   - : Defines the height as a distance value.
 - {{cssxref("<percentage>")}}
-  - : Defines the height as a percentage of the [containing block](/en-US/docs/Web/CSS/Containing_block)'s height.
+  - : Defines the height as a percentage of the [containing block](/en-US/docs/Web/CSS/CSS_display/Containing_block)'s height.
 - `auto`
   - : The browser will calculate and select a height for the specified element.
 - `max-content`
@@ -65,7 +65,7 @@ height: unset;
   - : Uses the fit-content formula with the available space replaced by the specified argument, i.e. `min(max-content, max(min-content, <length-percentage>))`.
 - `stretch`
 
-  - : Sets the height of the element's [margin box](/en-US/docs/Learn_web_development/Core/Styling_basics/Box_model#parts_of_a_box) to the height of its [containing block](/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block). It attempts to make the margin box fill the available space in the containing block, so in a way behaving similar to `100%` but applying the resulting size to the margin box rather than the box determined by [box-sizing](/en-US/docs/Web/CSS/box-sizing).
+  - : Sets the height of the element's [margin box](/en-US/docs/Learn_web_development/Core/Styling_basics/Box_model#parts_of_a_box) to the height of its [containing block](/en-US/docs/Web/CSS/CSS_display/Containing_block#identifying_the_containing_block). It attempts to make the margin box fill the available space in the containing block, so in a way behaving similar to `100%` but applying the resulting size to the margin box rather than the box determined by [box-sizing](/en-US/docs/Web/CSS/box-sizing).
 
     > [!NOTE]
     > To check aliases used by browsers for the `stretch` value and its implementation status, see the [Browser compatibility](#browser_compatibility) section.