diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt index 6bf7db646021b31..0ac19ba7bd08d74 100644 --- a/files/en-us/_redirects.txt +++ b/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 @@ -11845,8 +11845,8 @@ /en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mixins /en-US/docs/Glossary/Flexbox /en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes /en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox /en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications /en-US/docs/Web/CSS/CSS_flexible_box_layout/Typical_use_cases_of_flexbox -/en-US/docs/Web/CSS/CSS_Flow_Layout/Formatting_Contexts_Explained /en-US/docs/Web/CSS/CSS_flow_layout/Introduction_to_formatting_contexts -/en-US/docs/Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts /en-US/docs/Web/CSS/CSS_flow_layout/Introduction_to_formatting_contexts +/en-US/docs/Web/CSS/CSS_Flow_Layout/Formatting_Contexts_Explained /en-US/docs/Web/CSS/CSS_display/Introduction_to_formatting_contexts +/en-US/docs/Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts /en-US/docs/Web/CSS/CSS_display/Introduction_to_formatting_contexts /en-US/docs/Web/CSS/CSS_Functionals /en-US/docs/Web/CSS/CSS_Functions /en-US/docs/Web/CSS/CSS_Grid /en-US/docs/Web/CSS/CSS_grid_layout /en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout /en-US/docs/Web/CSS/CSS_grid_layout/Auto-placement_in_grid_layout @@ -11917,8 +11917,19 @@ /en-US/docs/Web/CSS/CSS_charsets /en-US/docs/Web/CSS/CSS_syntax /en-US/docs/Web/CSS/CSS_container_queries /en-US/docs/Web/CSS/CSS_containment/Container_queries /en-US/docs/Web/CSS/CSS_descriptor_definition /en-US/docs/Web/CSS +/en-US/docs/Web/CSS/CSS_display/flow_layout/Block_and_inline_layout_in_normal_flow /en-US/docs/Web/CSS/CSS_display/Block_and_inline_layout_in_normal_flow +/en-US/docs/Web/CSS/CSS_display/flow_layout/Flow_layout_and_overflow /en-US/docs/Web/CSS/CSS_display/Flow_layout_and_overflow +/en-US/docs/Web/CSS/CSS_display/flow_layout/Flow_layout_and_writing_modes /en-US/docs/Web/CSS/CSS_display/Flow_layout_and_writing_modes +/en-US/docs/Web/CSS/CSS_display/flow_layout/In_flow_and_out_of_flow /en-US/docs/Web/CSS/CSS_display/In_flow_and_out_of_flow +/en-US/docs/Web/CSS/CSS_display/flow_layout/Introduction_to_formatting_contexts /en-US/docs/Web/CSS/CSS_display/Introduction_to_formatting_contexts /en-US/docs/Web/CSS/CSS_flex-wrap /en-US/docs/Web/CSS/flex-wrap /en-US/docs/Web/CSS/CSS_flexible_box_layout/Backwards_compatibility_of_flexbox /en-US/docs/Glossary/Flexbox +/en-US/docs/Web/CSS/CSS_flow_layout /en-US/docs/Web/CSS/CSS_display/flow_layout +/en-US/docs/Web/CSS/CSS_flow_layout/Block_and_inline_layout_in_normal_flow /en-US/docs/Web/CSS/CSS_display/Block_and_inline_layout_in_normal_flow +/en-US/docs/Web/CSS/CSS_flow_layout/Flow_layout_and_overflow /en-US/docs/Web/CSS/CSS_display/Flow_layout_and_overflow +/en-US/docs/Web/CSS/CSS_flow_layout/Flow_layout_and_writing_modes /en-US/docs/Web/CSS/CSS_display/Flow_layout_and_writing_modes +/en-US/docs/Web/CSS/CSS_flow_layout/In_flow_and_out_of_flow /en-US/docs/Web/CSS/CSS_display/In_flow_and_out_of_flow +/en-US/docs/Web/CSS/CSS_flow_layout/Introduction_to_formatting_contexts /en-US/docs/Web/CSS/CSS_display/Introduction_to_formatting_contexts /en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_and_progressive_enhancement /en-US/docs/Web/CSS/CSS_grid_layout /en-US/docs/Web/CSS/CSS_grid_layout/Layout_using_line-based_placement /en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement /en-US/docs/Web/CSS/CSS_grid_layout/Layout_using_named_grid_lines /en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_named_grid_lines @@ -11932,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 @@ -12020,8 +12032,9 @@ /en-US/docs/Web/CSS/counters() /en-US/docs/Web/CSS/counters /en-US/docs/Web/CSS/cross-fade() /en-US/docs/Web/CSS/cross-fade /en-US/docs/Web/CSS/default /en-US/docs/Web/CSS/:default -/en-US/docs/Web/CSS/display/multi-value_syntax_of_display /en-US/docs/Web/CSS/display/multi-keyword_syntax_of_display -/en-US/docs/Web/CSS/display/two-value_syntax_of_display /en-US/docs/Web/CSS/display/multi-keyword_syntax_of_display +/en-US/docs/Web/CSS/display/multi-keyword_syntax_of_display /en-US/docs/Web/CSS/CSS_display/multi-keyword_syntax_of_display +/en-US/docs/Web/CSS/display/multi-value_syntax_of_display /en-US/docs/Web/CSS/CSS_display/multi-keyword_syntax_of_display +/en-US/docs/Web/CSS/display/two-value_syntax_of_display /en-US/docs/Web/CSS/CSS_display/multi-keyword_syntax_of_display /en-US/docs/Web/CSS/document /en-US/docs/Web/CSS/@document /en-US/docs/Web/CSS/document/@-moz-document /en-US/docs/Web/CSS/@document /en-US/docs/Web/CSS/element() /en-US/docs/Web/CSS/element diff --git a/files/en-us/_wikihistory.json b/files/en-us/_wikihistory.json index ad6849933a014c0..8c0e9bbc4ab2ed1 100644 --- a/files/en-us/_wikihistory.json +++ b/files/en-us/_wikihistory.json @@ -76432,6 +76432,21 @@ "teoli" ] }, + "Web/CSS/CSS_display/Block_and_inline_layout_in_normal_flow": { + "modified": "2020-06-24T00:31:42.747Z", + "contributors": [ + "mfuji09", + "haond10adp", + "mikemorr", + "segmentationfaulter", + "alattalatta", + "FranklinYu", + "ExE-Boss", + "beautifulcoder", + "estelle", + "rachelandrew" + ] + }, "Web/CSS/CSS_display/Block_formatting_context": { "modified": "2020-11-02T20:53:20.927Z", "contributors": [ @@ -76469,6 +76484,72 @@ "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"] + }, + "Web/CSS/CSS_display/Flow_layout_and_writing_modes": { + "modified": "2020-06-24T00:31:47.285Z", + "contributors": ["mfuji09", "estelle", "rachelandrew"] + }, + "Web/CSS/CSS_display/In_flow_and_out_of_flow": { + "modified": "2020-06-24T00:31:53.097Z", + "contributors": ["ExE-Boss", "mfuji09", "rachelandrew"] + }, + "Web/CSS/CSS_display/Introduction_to_formatting_contexts": { + "modified": "2020-08-09T11:05:30.382Z", + "contributors": [ + "mfuji09", + "chrisdavidmills", + "sanketj", + "kvoncode", + "Mats.Palmgren", + "MerrickClark", + "Sheppy", + "BruceYuj", + "estelle", + "rachelandrew" + ] + }, + "Web/CSS/CSS_display/flow_layout": { + "modified": "2020-06-24T00:31:39.254Z", + "contributors": [ + "mfuji09", + "chuanqisun", + "ExE-Boss", + "estelle", + "rachelandrew" + ] + }, + "Web/CSS/CSS_display/multi-keyword_syntax_of_display": { + "modified": "2020-10-15T22:26:04.121Z", + "contributors": [ + "ExE-Boss", + "gerfolder", + "blueblots", + "zbjornson", + "pallxk", + "chrisdavidmills", + "rachelandrew" + ] + }, "Web/CSS/CSS_filter_effects": { "modified": "2020-12-02T11:05:43.361Z", "contributors": ["peterbe", "wbamberg", "fscholz", "mfluehr"] @@ -76572,58 +76653,6 @@ "chrisdavidmills" ] }, - "Web/CSS/CSS_flow_layout": { - "modified": "2020-06-24T00:31:39.254Z", - "contributors": [ - "mfuji09", - "chuanqisun", - "ExE-Boss", - "estelle", - "rachelandrew" - ] - }, - "Web/CSS/CSS_flow_layout/Block_and_inline_layout_in_normal_flow": { - "modified": "2020-06-24T00:31:42.747Z", - "contributors": [ - "mfuji09", - "haond10adp", - "mikemorr", - "segmentationfaulter", - "alattalatta", - "FranklinYu", - "ExE-Boss", - "beautifulcoder", - "estelle", - "rachelandrew" - ] - }, - "Web/CSS/CSS_flow_layout/Flow_layout_and_overflow": { - "modified": "2020-06-24T00:31:43.651Z", - "contributors": ["mfuji09", "estelle", "rachelandrew"] - }, - "Web/CSS/CSS_flow_layout/Flow_layout_and_writing_modes": { - "modified": "2020-06-24T00:31:47.285Z", - "contributors": ["mfuji09", "estelle", "rachelandrew"] - }, - "Web/CSS/CSS_flow_layout/In_flow_and_out_of_flow": { - "modified": "2020-06-24T00:31:53.097Z", - "contributors": ["ExE-Boss", "mfuji09", "rachelandrew"] - }, - "Web/CSS/CSS_flow_layout/Introduction_to_formatting_contexts": { - "modified": "2020-08-09T11:05:30.382Z", - "contributors": [ - "mfuji09", - "chrisdavidmills", - "sanketj", - "kvoncode", - "Mats.Palmgren", - "MerrickClark", - "Sheppy", - "BruceYuj", - "estelle", - "rachelandrew" - ] - }, "Web/CSS/CSS_fonts": { "modified": "2020-07-07T12:15:10.154Z", "contributors": [ @@ -77970,23 +77999,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": [ @@ -83086,18 +83098,6 @@ "chrisdavidmills" ] }, - "Web/CSS/display/multi-keyword_syntax_of_display": { - "modified": "2020-10-15T22:26:04.121Z", - "contributors": [ - "ExE-Boss", - "gerfolder", - "blueblots", - "zbjornson", - "pallxk", - "chrisdavidmills", - "rachelandrew" - ] - }, "Web/CSS/easing-function": { "modified": "2020-12-07T09:11:33.352Z", "contributors": [ diff --git a/files/en-us/glossary/ink_overflow/index.md b/files/en-us/glossary/ink_overflow/index.md index 19f19e23c3a12b2..e8683f08cfa97a0 100644 --- a/files/en-us/glossary/ink_overflow/index.md +++ b/files/en-us/glossary/ink_overflow/index.md @@ -10,7 +10,7 @@ The **ink overflow** of a box refers to the part of the box and its contents tha Ink overflow is the overflow of painting effects such as [box shadows](/en-US/docs/Web/CSS/box-shadow), [border images](/en-US/docs/Web/CSS/CSS_backgrounds_and_borders), [text decoration](/en-US/docs/Web/CSS/CSS_text_decoration), [outlines](/en-US/docs/Web/CSS/outline), etc. that do not affect layout or otherwise extend the scrollable overflow area. Ink overflow is also the overhanging of glyphs, such as ascenders and descenders extending outside the em box. -As [replaced elements](/en-US/docs/Web/CSS/Replaced_element) always establish an independent [formatting context](/en-US/docs/Web/CSS/CSS_flow_layout/Introduction_to_formatting_contexts), any overflow of replaced content is always ink overflow (as opposed to [scrollable overflow](/en-US/docs/Learn_web_development/Core/Styling_basics/Overflow)). +As [replaced elements](/en-US/docs/Web/CSS/Replaced_element) always establish an independent [formatting context](/en-US/docs/Web/CSS/CSS_display/Introduction_to_formatting_contexts), any overflow of replaced content is always ink overflow (as opposed to [scrollable overflow](/en-US/docs/Learn_web_development/Core/Styling_basics/Overflow)). ## See also diff --git a/files/en-us/glossary/inset_properties/index.md b/files/en-us/glossary/inset_properties/index.md index 225258978cb5e16..ee8834342711c8f 100644 --- a/files/en-us/glossary/inset_properties/index.md +++ b/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 diff --git a/files/en-us/learn_web_development/core/styling_basics/handling_different_text_directions/index.md b/files/en-us/learn_web_development/core/styling_basics/handling_different_text_directions/index.md index fd6d7c64fe3619c..fd5f0c7251c5476 100644 --- a/files/en-us/learn_web_development/core/styling_basics/handling_different_text_directions/index.md +++ b/files/en-us/learn_web_development/core/styling_basics/handling_different_text_directions/index.md @@ -71,7 +71,7 @@ So the `writing-mode` property is in reality setting the direction in which bloc ## Writing modes and block and inline layout -We have already discussed [block and inline layout](/en-US/docs/Web/CSS/CSS_flow_layout/Block_and_inline_layout_in_normal_flow), and the fact that some things display as block elements and others as inline elements. As we have seen described above, block and inline is tied to the writing mode of the document, and not the physical screen. Blocks are only displayed from the top to the bottom of the page if you are using a writing mode that displays text horizontally, such as English. +We have already discussed [block and inline layout](/en-US/docs/Web/CSS/CSS_display/Block_and_inline_layout_in_normal_flow), and the fact that some things display as block elements and others as inline elements. As we have seen described above, block and inline is tied to the writing mode of the document, and not the physical screen. Blocks are only displayed from the top to the bottom of the page if you are using a writing mode that displays text horizontally, such as English. If we look at an example this will become clearer. In this next example I have two boxes that contain a heading and a paragraph. The first uses `writing-mode: horizontal-tb`, a writing mode that is written horizontally and from the top of the page to the bottom. The second uses `writing-mode: vertical-rl`; this is a writing mode that is written vertically and from right to left. diff --git a/files/en-us/web/api/htmlelement/offsetparent/index.md b/files/en-us/web/api/htmlelement/offsetparent/index.md index 76582a80a045a9f..822d7266dc94ab2 100644 --- a/files/en-us/web/api/htmlelement/offsetparent/index.md +++ b/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. diff --git a/files/en-us/web/css/@media/overflow-block/index.md b/files/en-us/web/css/@media/overflow-block/index.md index a3abdf5b6d410e4..bd47c82f54a0605 100644 --- a/files/en-us/web/css/@media/overflow-block/index.md +++ b/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. diff --git a/files/en-us/web/css/@media/overflow-inline/index.md b/files/en-us/web/css/@media/overflow-inline/index.md index 47a4f5552ad02cd..c3f1e452a3a1154 100644 --- a/files/en-us/web/css/@media/overflow-inline/index.md +++ b/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. diff --git a/files/en-us/web/css/align-content/index.md b/files/en-us/web/css/align-content/index.md index 44944e5b52d9767..65cca726a7f5f69 100644 --- a/files/en-us/web/css/align-content/index.md +++ b/files/en-us/web/css/align-content/index.md @@ -250,6 +250,6 @@ In [block layout](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_block_a - [Aligning items in a flex container](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container) - [Box alignment in grid layout](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_grid_layout) - [CSS box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) -- [Block and inline layout in normal flow](/en-US/docs/Web/CSS/CSS_flow_layout/Block_and_inline_layout_in_normal_flow) +- [Block and inline layout in normal flow](/en-US/docs/Web/CSS/CSS_display/Block_and_inline_layout_in_normal_flow) - [Block-level_content](/en-US/docs/Glossary/Block-level_content) - {{CSSXRef("display")}} diff --git a/files/en-us/web/css/anchor-name/index.md b/files/en-us/web/css/anchor-name/index.md index 5d16148a97f4f4d..150444ff51d91cc 100644 --- a/files/en-us/web/css/anchor-name/index.md +++ b/files/en-us/web/css/anchor-name/index.md @@ -46,7 +46,7 @@ The anchor element accepts one or more `` 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. diff --git a/files/en-us/web/css/anchor-size/index.md b/files/en-us/web/css/anchor-size/index.md index 4a796c1b6f0c7dc..719de0db8020c97 100644 --- a/files/en-us/web/css/anchor-size/index.md +++ b/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` diff --git a/files/en-us/web/css/anchor/index.md b/files/en-us/web/css/anchor/index.md index 9d3a6144cb81afe..33def4d98e58b65 100644 --- a/files/en-us/web/css/anchor/index.md +++ b/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` diff --git a/files/en-us/web/css/contain/index.md b/files/en-us/web/css/contain/index.md index b4d65d5c039aa95..20ef6ede3609b7c 100644 --- a/files/en-us/web/css/contain/index.md +++ b/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). diff --git a/files/en-us/web/css/css_anchor_positioning/using/index.md b/files/en-us/web/css/css_anchor_positioning/using/index.md index 3274123c8b3e9d3..221c2c81838ccc7 100644 --- a/files/en-us/web/css/css_anchor_positioning/using/index.md +++ b/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 `