HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URLs added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<div class="page ha-focus">
<nav class="page__navigation" data-uia-control-skin="2">
<ul class="ra-list page__navigation-list uia-scroller" role="tablist" data-uia-control-skin="3">
<li class="page__navigation-group uia-scroller__item">
<button class="page__navigation-button ra-button uia-control" type="button" role="tab" aria-selected="true" aria-controls="absolute-tab" id="absolute">
<span class="uia-control__group">position: absolute</span>
</button>
</li>
<li class="page__navigation-group uia-scroller__item">
<button class="page__navigation-button ra-button uia-control" type="button" role="tab" aria-selected="false" aria-controls="fixed-tab" id="fixed">
<span class="uia-control__group">position: fixed</span>
</button>
</li>
<li class="page__navigation-group uia-scroller__item">
<button class="page__navigation-button ra-button uia-control" type="button" role="tab" aria-selected="false" aria-controls="relative-tab" id="relative" tabindex="-1">
<span class="uia-control__group">position: relative</span>
</button>
</li>
<li class="page__navigation-group uia-scroller__item">
<button class="page__navigation-button ra-button uia-control" type="button" role="tab" aria-selected="false" aria-controls="static-tab" id="static" tabindex="-1">
<span class="uia-control__group">position: static</span>
</button>
</li>
<li class="page__navigation-group uia-scroller__item">
<button class="page__navigation-button ra-button uia-control" type="button" role="tab" aria-selected="false" aria-controls="sticky-tab" id="sticky" tabindex="-1">
<span class="uia-control__group">position: sticky</span>
</button>
</li>
</ul>
</nav>
<aside class="page__graphic-description" aria-hidden="true">
<div class="page__infographics">
<div class="page__infographics-text">
<p>Before reading the cheat sheet you should look at the following graphic that I use to mark elements areas</p>
</div>
<div class="page__graphic">
<span class="page__graphic-parent">I'm a parent area</span>
<span class="page__graphic-child">I'm a child area</span>
</div>
</div>
</aside>
<main class="page__container">
<section id="absolute-tab" aria-labelledby="absolute" role="tabpanel" tabindex="0" class="page__content" >
<h3>The block values</h3>
<div class="page__remark">
<p>
Note! I mean the block values are the block, flex and grid value
</p>
</div>
<p>
<span class="page__point">1</span>
When we add position: absolute to all childs they fall out of the parent, i.e it's the height property will be set to 0px.
</p>
<p class="ha-screen-reader">The parent height is collapsed after adding position absolute to a child element.</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box">
<span class="demo-box__text">I'm the item with display: block</span>
</div>
</div>
</div>
<span class="page__demo-caption">the height property of the parent before adding position: absolute to childs</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 2.25rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box position-absolute">
<span class="demo-box__text">I'm the item with display: block</span>
</div>
</div>
</div>
<span class="page__demo-caption">the height property of the parent after adding position: absolute to childs</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box display-flex">
<span class="demo-box__text">I'm the item with display: flex</span>
</div>
</div>
</div>
<span class="page__demo-caption">the height property of the parent before adding position: absolute to childs</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 2.25rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box display-flex position-absolute">
<span class="demo-box__text">I'm the item with display: flex</span>
</div>
</div>
</div>
<span class="page__demo-caption">the height property of the parent after adding position: absolute to childs</span>
</div>
</div>
<p>
If position: absolute is set to the part of childs the parent height is computed depending on the height of childs without position: absolute.
</p>
<p class="ha-screen-reader">Two child elements are displayed in a column. The second has position absolute, the first does not. The parent height is computed depending on the height of the first element.</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: block #1</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the item with display: block #2</span>
</div>
</div>
</div>
<span class="page__demo-caption">the height property of the parent before adding position: absolute to item #2</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 2.25rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="page__demo-viewport">
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: block #1</span>
</div>
<div class="demo-box position-absolute">
<span class="demo-box__text">I'm the item with display: block #2</span>
</div>
</div>
</div>
</div>
<span class="page__demo-caption">the height property of the parent after adding position: absolute to item #2</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box demo-box_accent display-grid">
<span class="demo-box__text">I'm the item with display: grid #1</span>
</div>
<div class="demo-box display-grid">
<span class="demo-box__text">I'm the item with display: grid #2</span>
</div>
</div>
</div>
<span class="page__demo-caption">the height property of the parent before adding position: absolute to childs</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 2.25rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box demo-box_accent display-grid">
<span class="demo-box__text">I'm the item with display: grid #1</span>
</div>
<div class="demo-box display-grid position-absolute">
<span class="demo-box__text">I'm the item with display: grid #2</span>
</div>
</div>
</div>
<span class="page__demo-caption">the height property of the parent after adding position: absolute to childs</span>
</div>
</div>
<p>
<span class="page__point">2</span>
Adding position: absolute doesn't change the display computed value. All values are saved.
</p>
<p class="ha-screen-reader">There are elements with display block, display flex, display grid and display table. These values don't change after adding position absolute to the element.</p>
<div class="page__remark" aria-hidden="true">
<p>
Note! Please, check the Computed tab on devTools to see how a browser changes a computed value for the display property
</p>
</div>
<div class="page__demos" style="--demo-caption-gap: 2.25rem" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box position-absolute">
<span class="demo-box__text">I'm the item with display: block</span>
</div>
</div>
</div>
<span class="page__demo-caption">the block value is saved</span>
</div>
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box display-flex position-absolute">
<span class="demo-box__text">I'm the item with display: flex</span>
</div>
</div>
</div>
<span class="page__demo-caption">the flex value is saved</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 2.25rem" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box display-grid position-absolute">
<span class="demo-box__text">I'm the item with display: grid</span>
</div>
</div>
</div>
<span class="page__demo-caption">the grid value is saved</span>
</div>
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box display-table position-absolute">
<span class="demo-box__text">I'm the item with display: table</span>
</div>
</div>
</div>
<span class="page__demo-caption">the table value is saved</span>
</div>
</div>
<p>
<span class="page__point">3</span>
The width and height properties of elements with position: absolute are computed depending on content. Therefore the width property of elements with display: block stops to fill up all available space by the text direction.
</p>
<p class="ha-screen-reader">The width of the element with display block has shrunk to the width of the text after position absolute.</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box">
<span class="demo-box__text">I'm the item with display: block</span>
</div>
</div>
</div>
<span class="page__demo-caption">the width and height properties before adding position: absolute</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 3rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box position-absolute">
<span class="demo-box__text">I'm the item with display: block</span>
</div>
</div>
</div>
<span class="page__demo-caption">the width and height properties after adding position: absolute</span>
</div>
</div>
<p>
<span class="page__point">4</span>
Since the width and height properties can be applied to elements with block values we don't get some changes when we add position: absolute to them.
</p>
<p class="ha-screen-reader">The element with 148px width and height displays equally before and after adding position absolute. As a result browser will display square.</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box demo-box_with-sizes">
<span class="demo-box__text">I'm the item with display: block</span>
</div>
</div>
</div>
<span class="page__demo-caption">width: 148px and height: 148px are applied to the item before adding position: absolute</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 9rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box demo-box_with-sizes position-absolute">
<span class="demo-box__text">I'm the item with display: block</span>
</div>
</div>
</div>
<span class="page__demo-caption">width: 148px and height: 148px are applied to the item after adding position: absolute</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box demo-box_with-sizes display-flex">
<span class="demo-box__text">I'm the item with display: flex</span>
</div>
</div>
</div>
<span class="page__demo-caption">width: 148px and height: 148px are applied to the item before adding position: absolute</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 9rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box demo-box_with-sizes display-flex position-absolute">
<span class="demo-box__text">I'm the item with display: flex</span>
</div>
</div>
</div>
<span class="page__demo-caption">width: 148px and height: 148px are applied to the item after adding position: absolute</span>
</div>
</div>
<p>
<span class="page__point">5</span>
The padding and border properties work without changes for elements after adding position: absolute.
</p>
<div class="page__demos" style="--demo-caption-gap: .75rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box is-padding">
<span class="demo-box__text">I'm the item with display: block</span>
</div>
</div>
</div>
<span class="page__demo-caption">paddings before adding position: absolute</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 3.5rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box is-padding position-absolute">
<span class="demo-box__text">I'm the item with display: block</span>
</div>
</div>
</div>
<span class="page__demo-caption">paddings after adding position: absolute</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: .75rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box is-padding display-grid">
<span class="demo-box__text">I'm the item with display: grid</span>
</div>
</div>
</div>
<span class="page__demo-caption">paddings before adding position: absolute</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 3.5rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box is-padding display-grid position-absolute">
<span class="demo-box__text">I'm the item with display: grid</span>
</div>
</div>
</div>
<span class="page__demo-caption">paddings after adding position: absolute</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: .75rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box is-border">
<span class="demo-box__text">I'm the item with display: block</span>
</div>
</div>
</div>
<span class="page__demo-caption">borders before adding position: absolute</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 3.5rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box is-border position-absolute">
<span class="demo-box__text">I'm the item with display: block</span>
</div>
</div>
</div>
<span class="page__demo-caption">borders after adding position: absolute</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: .75rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box is-border display-grid">
<span class="demo-box__text">I'm the item with display: grid</span>
</div>
</div>
</div>
<span class="page__demo-caption">borders before adding position: absolute</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 3.5rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box is-border display-grid position-absolute">
<span class="demo-box__text">I'm the item with display: grid</span>
</div>
</div>
</div>
<span class="page__demo-caption">borders after adding position: absolute</span>
</div>
</div>
<p>
Margin Collapsing of the elements with block values stop to work. Vertical margins don't extend beyond the parent. Margins between the elements don't collapse.
</p>
<p class="ha-screen-reader">The elements with margins overlap on each other after adding position absolute.</p>
<div class="page__demos" style="--demo-caption-gap: .75rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box is-margin">
<span class="demo-box__text">I'm the item with display: block #1</span>
</div>
<div class="demo-box is-margin">
<span class="demo-box__text">I'm the item with display: block #2</span>
</div>
</div>
</div>
<span class="page__demo-caption">margins before adding position: absolute</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 3.5rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box is-margin position-absolute">
<span class="demo-box__text">I'm the item with display: block #1</span>
</div>
<div class="demo-box is-margin position-absolute">
<span class="demo-box__text">I'm the item with display: block #2</span>
</div>
</div>
</div>
<span class="page__demo-caption">margins after adding position: absolute</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: .75rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box is-margin display-flex">
<span class="demo-box__text">I'm the item with display: flex #1</span>
</div>
<div class="demo-box is-margin display-flex">
<span class="demo-box__text">I'm the item with display: flex #2</span>
</div>
</div>
</div>
<span class="page__demo-caption">margins before adding position: absolute</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 3.5rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box is-margin display-flex position-absolute">
<span class="demo-box__text">I'm the item with display: flex #1</span>
</div>
<div class="demo-box is-margin display-flex position-absolute">
<span class="demo-box__text">I'm the item with display: flex #2</span>
</div>
</div>
</div>
<span class="page__demo-caption">margins after adding position: absolute</span>
</div>
</div>
<p>
<span class="page__point">6</span>
Elements with block values are positioned in a column by default. When adding position: absolute they will be shifted according to a defined algorithm.
</p>
<p>
The first element in HTML saves a start position. The remaining elements shift in such a way that they are one above the other. The first element in HTML will be the bottom and the last element — the top.
</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box">
<span class="demo-box__text">I'm the item with display: block #1</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the item with display: block #2</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the item with display: block #3</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the item with display: block #4</span>
</div>
</div>
</div>
<span class="page__demo-caption">the items are positioned in a column before adding position: absolute</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 3rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box position-absolute">
<span class="demo-box__text">I'm the item with display: block #1</span>
</div>
<div class="demo-box position-absolute">
<span class="demo-box__text">I'm the item with display: block #2</span>
</div>
<div class="demo-box position-absolute">
<span class="demo-box__text">I'm the item with display: block #3</span>
</div>
<div class="demo-box position-absolute">
<span class="demo-box__text">I'm the item with display: block #4</span>
</div>
</div>
</div>
<span class="page__demo-caption">the items are overlapped after adding position: absolute</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box display-grid">
<span class="demo-box__text">I'm the item with display: grid #1</span>
</div>
<div class="demo-box display-grid">
<span class="demo-box__text">I'm the item with display: grid #2</span>
</div>
<div class="demo-box display-grid">
<span class="demo-box__text">I'm the item with display: grid #3</span>
</div>
<div class="demo-box display-grid">
<span class="demo-box__text">I'm the item with display: grid #4</span>
</div>
</div>
</div>
<span class="page__demo-caption">the items are positioned in a column before adding position: absolute</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 3rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box display-grid position-absolute">
<span class="demo-box__text">I'm the item with display: grid #1</span>
</div>
<div class="demo-box display-grid position-absolute">
<span class="demo-box__text">I'm the item with display: grid #2</span>
</div>
<div class="demo-box display-grid position-absolute">
<span class="demo-box__text">I'm the item with display: grid #3</span>
</div>
<div class="demo-box display-grid position-absolute">
<span class="demo-box__text">I'm the item with display: grid #4</span>
</div>
</div>
</div>
<span class="page__demo-caption">the items are overlapped after adding position: absolute</span>
</div>
</div>
<p>
Elements with position: absolute can't overlap nearby elements without position: absolute that are before them.
</p>
<p>
The first element with position: absolute will be after the last element without. Other nearby elements with position: absolute will overlap the first.
</p>
<p class="ha-screen-reader">There are 4 elements, the first two elements don't have position absolute and the 3 and 4 have. The 1 and 2 elements are displayed below each other in a column. The 3 and 4 elements overlap on each other and display below the 2 element.</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: block #1</span>
</div>
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: block #2</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the item with display: block #3</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the item with display: block #4</span>
</div>
</div>
</div>
<span class="page__demo-caption">the items before adding position: absolute to items #3 and #4</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 2.75rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: block #1</span>
</div>
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: block #2</span>
</div>
<div class="demo-box position-absolute">
<span class="demo-box__text">I'm the item with display: block #3</span>
</div>
<div class="demo-box position-absolute">
<span class="demo-box__text">I'm the item with display: block #4</span>
</div>
</div>
</div>
<span class="page__demo-caption">the items after adding position: absolute to items #3 and #4</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box demo-box_accent display-flex">
<span class="demo-box__text">I'm just the item with display: flex #1</span>
</div>
<div class="demo-box demo-box_accent display-flex">
<span class="demo-box__text">I'm just the item with display: flex #2</span>
</div>
<div class="demo-box display-flex">
<span class="demo-box__text">I'm the item with display: flex #3</span>
</div>
<div class="demo-box display-flex">
<span class="demo-box__text">I'm the item with display: flex #4</span>
</div>
</div>
</div>
<span class="page__demo-caption">the items before adding position: absolute to items #3 and #4</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 2.75rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box demo-box_accent display-flex">
<span class="demo-box__text">I'm just the item with display: flex #1</span>
</div>
<div class="demo-box demo-box_accent display-flex">
<span class="demo-box__text">I'm just the item with display: flex #2</span>
</div>
<div class="demo-box display-flex position-absolute">
<span class="demo-box__text">I'm the item with display: flex #3</span>
</div>
<div class="demo-box display-flex position-absolute">
<span class="demo-box__text">I'm the item with display: flex #4</span>
</div>
</div>
</div>
<span class="page__demo-caption">the items after adding position: absolute to items #3 and #4</span>
</div>
</div>
<p>
Elements with position: absolute will overlap following nearby elements because they will shift. The gap of shifting will be equal to the sum of the sizes of the elements with position: absolute.
</p>
<p class="ha-screen-reader">There are 4 elements, the 1 and 4 elements don't have position absolute and the 2 and 3 have. The 1 and 4 elements are displayed below each other in a column. The 2 and 3 elements overlap on each other and display above the 4 element.</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: block #1</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the item with display: block #2</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the item with display: block #3</span>
</div>
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: block #4</span>
</div>
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: block #5</span>
</div>
</div>
</div>
<span class="page__demo-caption">the items before adding position: absolute to items #2 and #3</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: block #1</span>
</div>
<div class="demo-box position-absolute">
<span class="demo-box__text">I'm the item with display: block #2</span>
</div>
<div class="demo-box position-absolute">
<span class="demo-box__text">I'm the item with display: block #3</span>
</div>
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: block #4</span>
</div>
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: block #5</span>
</div>
</div>
</div>
<span class="page__demo-caption">the items after adding position: absolute to items #2 and #3</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box demo-box_accent display-grid">
<span class="demo-box__text">I'm just the item with display: grid #1</span>
</div>
<div class="demo-box display-grid">
<span class="demo-box__text">I'm the item with display: grid #2</span>
</div>
<div class="demo-box display-grid">
<span class="demo-box__text">I'm the item with display: grid #3</span>
</div>
<div class="demo-box demo-box_accent display-grid">
<span class="demo-box__text">I'm just the item with display: grid #4</span>
</div>
<div class="demo-box demo-box_accent display-grid">
<span class="demo-box__text">I'm just the item with display: grid #5</span>
</div>
</div>
</div>
<span class="page__demo-caption">the items before adding position: absolute to items #2 and #3</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box demo-box_accent display-grid">
<span class="demo-box__text">I'm just the item with display: grid #1</span>
</div>
<div class="demo-box display-grid position-absolute">
<span class="demo-box__text">I'm the item with display: grid #2</span>
</div>
<div class="demo-box display-grid position-absolute">
<span class="demo-box__text">I'm the item with display: grid #3</span>
</div>
<div class="demo-box demo-box_accent display-grid">
<span class="demo-box__text">I'm just the item with display: grid #4</span>
</div>
<div class="demo-box demo-box_accent display-grid">
<span class="demo-box__text">I'm just the item with display: grid #5</span>
</div>
</div>
</div>
<span class="page__demo-caption">the items after adding position: absolute to items #2 and #3</span>
</div>
</div>
<h3>The inline values</h3>
<div class="page__remark" aria-hidden="true">
<p>
Note! I mean the inline values are the inline, inline-block, inline-flex and inline-grid value
</p>
</div>
<p>
<span class="page__point">7</span>
As with block values when adding position: absolute to all childs the parent height is set to 0px.
</p>
<p class="ha-screen-reader">The parent height is collapsed after adding position absolute to a child element.</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box">
<span class="demo-box__text">I'm the item with display: inline</span>
</span>
</div>
</div>
<span class="page__demo-caption">the height property of the parent before adding position: absolute to childs</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 3rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box position-absolute">
<span class="demo-box__text">I'm the item with display: inline</span>
</span>
</div>
</div>
<span class="page__demo-caption">the height property of the parent after adding position: absolute to childs</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box display-inline-block">
<span class="demo-box__text">I'm the item with display: inline-block</span>
</span>
</div>
</div>
<span class="page__demo-caption">the height property of the parent before adding position: absolute to childs</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 3rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box display-inline-block position-absolute">
<span class="demo-box__text">I'm the item with display: inline-block</span>
</span>
</div>
</div>
<span class="page__demo-caption">the height property of the parent after adding position: absolute to childs</span>
</div>
</div>
<p>
When adding position: absolute to a part of childs the parent height will be computed by depending on the height childs without position: absolute.
</p>
<p class="ha-screen-reader">Five child elements are displayed in a two lines row. The last has position absolute, other do not. The parent height is computed depending on the height of two lines because elements without position absolute take up this space.</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box demo-box_accent">
<span class="demo-box__text">I'm the item with display: inline #1</span>
</span>
<span class="demo-box demo-box_accent">
<span class="demo-box__text">I'm the item with display: inline #2</span>
</span>
<span class="demo-box demo-box_accent">
<span class="demo-box__text">I'm the item with display: inline #3</span>
</span>
<span class="demo-box demo-box_accent">
<span class="demo-box__text">I'm the item with display: inline #4</span>
</span>
<span class="demo-box">
<span class="demo-box__text">I'm the item with display: inline #5</span>
</span>
</div>
</div>
<span class="page__demo-caption">the height property of the parent before adding position: absolute to childs</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: .5rem;">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box demo-box_accent">
<span class="demo-box__text">I'm the item with display: inline #1</span>
</span>
<span class="demo-box demo-box_accent">
<span class="demo-box__text">I'm the item with display: inline #2</span>
</span>
<span class="demo-box demo-box_accent">
<span class="demo-box__text">I'm the item with display: inline #3</span>
</span>
<span class="demo-box demo-box_accent">
<span class="demo-box__text">I'm the item with display: inline #4</span>
</span>
<span class="demo-box position-absolute">
<span class="demo-box__text">I'm the item with display: inline #5</span>
</span>
</div>
</div>
<span class="page__demo-caption">the height property of the parent after adding position: absolute to childs</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box demo-box_accent display-inline-block">
<span class="demo-box__text">I'm the item with display: inline-block #1</span>
</span>
<span class="demo-box demo-box_accent display-inline-block">
<span class="demo-box__text">I'm the item with display: inline-block #2</span>
</span>
<span class="demo-box demo-box_accent display-inline-block">
<span class="demo-box__text">I'm the item with display: inline-block #3</span>
</span>
<span class="demo-box demo-box_accent display-inline-block">
<span class="demo-box__text">I'm the item with display: inline-block #4</span>
</span>
<span class="demo-box display-inline-block">
<span class="demo-box__text">I'm the item with display: inline-block #5</span>
</span>
</div>
</div>
<span class="page__demo-caption">the height property of the parent before adding position: absolute to childs</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 2.5rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box demo-box_accent display-inline-block">
<span class="demo-box__text">I'm the item with display: inline-block #1</span>
</span>
<span class="demo-box demo-box_accent display-inline-block">
<span class="demo-box__text">I'm the item with display: inline-block #2</span>
</span>
<span class="demo-box demo-box_accent display-inline-block">
<span class="demo-box__text">I'm the item with display: inline-block #3</span>
</span>
<span class="demo-box demo-box_accent display-inline-block">
<span class="demo-box__text">I'm the item with display: inline-block #4</span>
</span>
<span class="demo-box position-absolute display-inline-block">
<span class="demo-box__text">I'm the item with display: inline-block #5</span>
</span>
</div>
</div>
<span class="page__demo-caption">the height property of the parent after adding position: absolute to childs</span>
</div>
</div>
<p>
<span class="page__point">8</span>
All inline values will be changed on block values. So the inline and inline-block will be changed to block, inline-flex -> flex, inline-grid -> grid and inline-table -> table.
</p>
<div class="page__demos" style="--demo-caption-gap: 2.25rem" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box position-absolute">
<span class="demo-box__text">I'm the item with display: inline</span>
</span>
</div>
</div>
<span class="page__demo-caption">the inline value is changed to the block value</span>
</div>
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box display-inline-block position-absolute">
<span class="demo-box__text">I'm the item with display: inline-block</span>
</div>
</div>
</div>
<span class="page__demo-caption">the inline-block value is changed to the block value</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 2.25rem" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box display-inline-flex position-absolute">
<span class="demo-box__text">I'm the item with display: inline-flex</span>
</span>
</div>
</div>
<span class="page__demo-caption">the inline-flex value is changed to the flex value</span>
</div>
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box display-inline-grid position-absolute">
<span class="demo-box__text">I'm the item with display: inline-grid</span>
</div>
</div>
</div>
<span class="page__demo-caption">the inline-grid value is changed to the grid value</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 2.25rem" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box display-inline-table position-absolute">
<span class="demo-box__text">I'm the item with display: inline-table</span>
</span>
</div>
</div>
<span class="page__demo-caption">the inline-table value is changed to the table value</span>
</div>
</div>
<p>
<span class="page__point">9</span>
By default, the width and height properties of elements with display: inline are computed depending on content. That behavior is saved but after adding position: absolute the auto value of these properties is changed to pixels.
</p>
<p class="ha-screen-reader">The element with display inline will be displayed the same after adding position absolute.</p>
<div class="page__remark" aria-hidden="true">
<p>
Note! Please, check the Computed tab on devTools to see how a browser changes a computed value for the width and height properties
</p>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box">
<span class="demo-box__text">I'm the item with display: inline</span>
</span>
</div>
</div>
<span class="page__demo-caption">the width and height properties are defined in the auto value before adding position: absolute</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 2.25rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box position-absolute">
<span class="demo-box__text">I'm the item with display: inline</span>
</span>
</div>
</div>
<span class="page__demo-caption">the width and height properties are defined in pixels after adding position: absolute</span>
</div>
</div>
<p>
<span class="page__point">10</span>
As well as these properties can't be applied to elements with display: inline. But adding position: absolute changes that. They are applied.
</p>
<p class="ha-screen-reader">The width and height properties with the 148px value will start to work after adding position absolute. As a result browser will display square.</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box demo-box_with-sizes">
<span class="demo-box__text">I'm the item with display: inline</span>
</span>
</div>
</div>
<span class="page__demo-caption">width: 148px and height: 148px are applied to the item before adding position: absolute</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 9rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box demo-box_with-sizes position-absolute">
<span class="demo-box__text">I'm the item with display: inline</span>
</span>
</div>
</div>
<span class="page__demo-caption">width: 148px and height: 148px are applied to the item after adding position: absolute</span>
</div>
</div>
<p>
But these properties are applied to elements with all other inline-* values. So we won't get any changes after adding position: absolute.
</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box demo-box_with-sizes display-inline-flex">
<span class="demo-box__text">I'm the item with display: inline-flex</span>
</span>
</div>
</div>
<span class="page__demo-caption">width: 148px and height: 148px are applied to the item before adding position: absolute</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 9rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box demo-box_with-sizes display-inline-flex position-absolute">
<span class="demo-box__text">I'm the item with display: inline-flex</span>
</span>
</div>
</div>
<span class="page__demo-caption">width: 148px and height: 148px are applied to the item after adding position: absolute</span>
</div>
</div>
<p>
<span class="page__point">11</span>
The vertical paddings, borders and margins of elements with display: inline stop to extend beyond the parent after adding position: absolute.
</p>
<div class="page__demos" style="--demo-caption-gap: 1.25rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box is-padding">
<span class="demo-box__text">I'm the item with display: inline</span>
</span>
</div>
</div>
<span class="page__demo-caption">paddings before adding position: absolute</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 3.5rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box is-padding position-absolute">
<span class="demo-box__text">I'm the item with display: inline</span>
</span>
</div>
</div>
<span class="page__demo-caption">paddings after adding position: absolute</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 1.25rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box is-border">
<span class="demo-box__text">I'm the item with display: inline</span>
</span>
</div>
</div>
<span class="page__demo-caption">borders before adding position: absolute</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 3.5rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box is-border position-absolute">
<span class="demo-box__text">I'm the item with display: inline</span>
</span>
</div>
</div>
<span class="page__demo-caption">borders after adding position: absolute</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 1.25rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box is-margin">
<span class="demo-box__text">I'm the item with display: inline</span>
</span>
</div>
</div>
<span class="page__demo-caption">margins before adding position: absolute</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 3.5rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box is-margin position-absolute">
<span class="demo-box__text">I'm the item with display: inline</span>
</span>
</div>
</div>
<span class="page__demo-caption">margins after adding position: absolute</span>
</div>
</div>
<p>
The same properties for the elements with display: inline-* don't extend beyond the parent. So there aren't changes after adding position: absolute.
</p>
<div class="page__demos" style="--demo-caption-gap: 1.25rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box is-padding display-inline-grid">
<span class="demo-box__text">I'm the item with display: inline-grid</span>
</span>
</div>
</div>
<span class="page__demo-caption">paddings before adding position: absolute</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 3.5rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box is-padding display-inline-grid position-absolute">
<span class="demo-box__text">I'm the item with display: inline-grid</span>
</span>
</div>
</div>
<span class="page__demo-caption">paddings after adding position: absolute</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 1.25rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box is-border display-inline-grid">
<span class="demo-box__text">I'm the item with display: inline-grid</span>
</span>
</div>
</div>
<span class="page__demo-caption">borders before adding position: absolute</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 3.5rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box is-border display-inline-grid position-absolute">
<span class="demo-box__text">I'm the item with display: inline-grid</span>
</span>
</div>
</div>
<span class="page__demo-caption">borders after adding position: absolute</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 1.25rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box is-margin display-inline-grid">
<span class="demo-box__text">I'm the item with display: inline-grid</span>
</span>
</div>
</div>
<span class="page__demo-caption">margins before adding position: absolute</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 3.5rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box is-margin display-inline-flex position-absolute">
<span class="demo-box__text">I'm the item with display: inline-grid</span>
</span>
</div>
</div>
<span class="page__demo-caption">margins after adding position: absolute</span>
</div>
</div>
<p>
<span class="page__point">12</span>
Elements with inline values for the display property are positioned in a row by default. When adding position: absolute they will be shifted in such a way as for elements with block values.
</p>
<p>
They will be displayed each other. The first element will be the bottom and the last element — the top.
</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box">
<span class="demo-box__text">I'm the item with display: inline #1</span>
</span>
<span class="demo-box">
<span class="demo-box__text">I'm the item with display: inline #2</span>
</span>
<span class="demo-box">
<span class="demo-box__text">I'm the item with display: inline #3</span>
</span>
<span class="demo-box">
<span class="demo-box__text">I'm the item with display: inline #4</span>
</span>
</div>
</div>
<span class="page__demo-caption">the items are positioned in a row before adding position: absolute</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 3rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box position-absolute">
<span class="demo-box__text">I'm the item with display: inline #1</span>
</span>
<span class="demo-box position-absolute">
<span class="demo-box__text">I'm the item with display: inline #2</span>
</span>
<span class="demo-box position-absolute">
<span class="demo-box__text">I'm the item with display: inline #3</span>
</span>
<span class="demo-box position-absolute">
<span class="demo-box__text">I'm the item with display: inline #4</span>
</span>
</div>
</div>
<span class="page__demo-caption">the items are overlapped after adding position: absolute</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box display-inline-flex">
<span class="demo-box__text">I'm the item with display: inline-flex #1</span>
</span>
<span class="demo-box display-inline-flex">
<span class="demo-box__text">I'm the item with display: inline-flex #2</span>
</span>
<span class="demo-box display-inline-flex">
<span class="demo-box__text">I'm the item with display: inline-flex #3</span>
</span>
<span class="demo-box display-inline-flex">
<span class="demo-box__text">I'm the item with display: inline-flex #4</span>
</span>
</div>
</div>
<span class="page__demo-caption">the items are positioned in a row before adding position: absolute</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 3rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box display-inline-flex position-absolute">
<span class="demo-box__text">I'm the item with display: inline-flex #1</span>
</span>
<span class="demo-box display-inline-flex position-absolute">
<span class="demo-box__text">I'm the item with display: inline-flex #2</span>
</span>
<span class="demo-box display-inline-flex position-absolute">
<span class="demo-box__text">I'm the item with display: inline-flex #3</span>
</span>
<span class="demo-box display-inline-flex position-absolute">
<span class="demo-box__text">I'm the item with display: inline-flex #4</span>
</span>
</div>
</div>
<span class="page__demo-caption">the items are overlapped after adding position: absolute</span>
</div>
</div>
<p>
They also can't overlap the elements before them. The first element with position: absolute will be after the last element without. Other nearby elements with position: absolute will overlap the first.
</p>
<p class="ha-screen-reader">There are 4 elements, the first two elements don't have position absolute and the 3 and 4 have. The 1 and 2 elements are displayed each other in a row. The 3 and 4 elements overlap on each other and display after the 2 element.</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: inline #1</span>
</span>
<span class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: inline #2</span>
</span>
<span class="demo-box">
<span class="demo-box__text">I'm the item with display: inline #3</span>
</span>
<span class="demo-box">
<span class="demo-box__text">I'm the item with display: inline #4</span>
</span>
</div>
</div>
<span class="page__demo-caption">the items before adding position: absolute to items #3 and #4</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 2rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: inline #1</span>
</span>
<span class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: inline #2</span>
</span>
<span class="demo-box position-absolute">
<span class="demo-box__text">I'm the item with display: inline #3</span>
</span>
<span class="demo-box position-absolute">
<span class="demo-box__text">I'm the item with display: inline #4</span>
</span>
</div>
</div>
<span class="page__demo-caption">the items after adding position: absolute to items #3 and #4</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box demo-box_accent display-inline-grid">
<span class="demo-box__text">I'm just the item with display: inline-grid #1</span>
</span>
<span class="demo-box demo-box_accent display-inline-grid">
<span class="demo-box__text">I'm just the item with display: inline-grid #2</span>
</span>
<span class="demo-box display-inline-grid">
<span class="demo-box__text">I'm the item with display: inline-grid #3</span>
</span>
<span class="demo-box display-inline-grid">
<span class="demo-box__text">I'm the item with display: inline-grid #4</span>
</span>
</div>
</div>
<span class="page__demo-caption">the items before adding position: absolute to items #3 and #4</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 2rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box demo-box_accent display-inline-grid">
<span class="demo-box__text">I'm just the item with display: inline-grid #1</span>
</span>
<span class="demo-box display-inline-grid demo-box_accent">
<span class="demo-box__text">I'm just the item with display: inline-grid #2</span>
</span>
<span class="demo-box display-inline-grid position-absolute">
<span class="demo-box__text">I'm the item with display: inline-grid #3</span>
</span>
<span class="demo-box display-inline-grid position-absolute">
<span class="demo-box__text">I'm the item with display: inline-grid #4</span>
</span>
</div>
</div>
<span class="page__demo-caption">the items after adding position: absolute to items #3 and #4</span>
</div>
</div>
<p>
When adding position: absolute to some elements remaining elements will be shifted. They will be overlapped as well.
</p>
<p class="ha-screen-reader">There are 4 elements, the 1 and 4 elements don't have position absolute and the 2 and 3 have. The 1 and 4 elements are displayed each other in a row. The 2 and 3 elements overlap on each other and display above the 4 element.</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: inline #1</span>
</span>
<span class="demo-box">
<span class="demo-box__text">I'm the item with display: inline #2</span>
</span>
<span class="demo-box">
<span class="demo-box__text">I'm the item with display: inline #3</span>
</span>
<span class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: inline #4</span>
</span>
<span class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: inline #5</span>
</span>
</div>
</div>
<span class="page__demo-caption">the items before adding position: absolute to items #2 and #3</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: inline #1</span>
</span>
<span class="demo-box position-absolute">
<span class="demo-box__text">I'm the item with display: inline #2</span>
</span>
<span class="demo-box position-absolute">
<span class="demo-box__text">I'm the item with display: inline #3</span>
</span>
<span class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: inline #4</span>
</span>
<span class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: inline #5</span>
</span>
</div>
</div>
<span class="page__demo-caption">the items after adding position: absolute to items #2 and #3</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box demo-box_accent display-inline-flex">
<span class="demo-box__text">I'm just the item with display: inline-flex #1</span>
</span>
<span class="demo-box display-inline-flex">
<span class="demo-box__text">I'm the item with display: inline-flex #2</span>
</span>
<span class="demo-box display-inline-flex">
<span class="demo-box__text">I'm the item with display: inline-flex #3</span>
</span>
<span class="demo-box demo-box_accent display-inline-flex">
<span class="demo-box__text">I'm just the item with display: inline-flex #4</span>
</span>
<span class="demo-box demo-box_accent display-inline-flex">
<span class="demo-box__text">I'm just the item with display: inline-flex #5</span>
</span>
</div>
</div>
<span class="page__demo-caption">the items before adding position: absolute to items #2 and #3</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box demo-box_accent display-inline-flex">
<span class="demo-box__text">I'm just the item with display: inline-flex #1</span>
</span>
<span class="demo-box display-inline-flex position-absolute">
<span class="demo-box__text">I'm the item with display: inline-flex #2</span>
</span>
<span class="demo-box display-inline-flex position-absolute">
<span class="demo-box__text">I'm the item with display: inline-flex #3</span>
</span>
<span class="demo-box demo-box_accent display-inline-flex">
<span class="demo-box__text">I'm just the item with display: inline-flex #4</span>
</span>
<span class="demo-box demo-box_accent display-inline-flex">
<span class="demo-box__text">I'm just the item with display: inline-flex #5</span>
</span>
</div>
</div>
<span class="page__demo-caption">the items after adding position: absolute to items #2 and #3</span>
</div>
</div>
<h3>Flex items</h3>
<p>
<span class="page__point">13</span>
Flex items stop to stretch by the additional axis when adding position: absolute to them.
</p>
<p class="ha-screen-reader">The width and height properties of the element are computed by text.</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-row">
<div class="demo-box">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">the flex item before adding position: absolute when the parent has flex-direction: row</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 2.25rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-row">
<div class="demo-box position-absolute">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">the flex item after adding position: absolute when the parent has flex-direction: row</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-column">
<div class="demo-box">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">the flex item before adding position: absolute when the parent has flex-direction: column</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 2.25rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-column">
<div class="demo-box position-absolute">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">the flex item after adding position: absolute when the parent has flex-direction: column</span>
</div>
</div>
<p>
<span class="page__point">14</span>
In the case position: absolute is added to flex items they will be overlapped at each other.
</p>
<p>
The first element in HTML saves a start position. The remaining elements shift in such a way that they are one above the other. The first element in HTML will be the bottom and the last element — the top.
</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-row">
<div class="demo-box">
<span class="demo-box__text">I'm the flex item #1</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the flex item #2</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the flex item #3</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the flex item #4</span>
</div>
</div>
</div>
<span class="page__demo-caption">the flex items are positioned in a row before adding position: absolute when the parent has flex-direction: row</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 3rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-row">
<div class="demo-box position-absolute">
<span class="demo-box__text">I'm the flex item #1</span>
</div>
<div class="demo-box position-absolute">
<span class="demo-box__text">I'm the flex item #2</span>
</div>
<div class="demo-box position-absolute">
<span class="demo-box__text">I'm the flex item #3</span>
</div>
<div class="demo-box position-absolute">
<span class="demo-box__text">I'm the flex item #4</span>
</div>
</div>
</div>
<span class="page__demo-caption">the flex items are overlapped after adding position: absolute when the parent has flex-direction: row</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-column">
<div class="demo-box">
<span class="demo-box__text">I'm the flex item #1</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the flex item #2</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the flex item #3</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the flex item #4</span>
</div>
</div>
</div>
<span class="page__demo-caption">the flex items are positioned in a column before adding position: absolute when the parent has flex-direction: column</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 3rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-column">
<div class="demo-box position-absolute">
<span class="demo-box__text">I'm the flex item #1</span>
</div>
<div class="demo-box position-absolute">
<span class="demo-box__text">I'm the flex item #2</span>
</div>
<div class="demo-box position-absolute">
<span class="demo-box__text">I'm the flex item #3</span>
</div>
<div class="demo-box position-absolute">
<span class="demo-box__text">I'm the flex item #4</span>
</div>
</div>
</div>
<span class="page__demo-caption">the flex items are overlapped after adding position: absolute when the parent has flex-direction: column</span>
</div>
</div>
<p>
Elements with position: absolute can overlap any nearby elements that might be before or after them. They move to the start position of the axis and line up in a column.
</p>
<p class="ha-screen-reader">There are 4 elements, the 1 and 4 elements don't have position absolute and the 2 and 3 have. The 2 and 3 elements overlap on each other and display above the 1 element.</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-row">
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the flex item #1</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the flex item #2</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the flex item #3</span>
</div>
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the flex item #4</span>
</div>
</div>
</div>
<span class="page__demo-caption">the flex items before adding position: absolute flex items #2 and #3 when the parent has flex-direction: row</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: .75rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-row">
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the flex item #1</span>
</div>
<div class="demo-box position-absolute">
<span class="demo-box__text">I'm the flex item #2</span>
</div>
<div class="demo-box position-absolute">
<span class="demo-box__text">I'm the flex item #3</span>
</div>
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the flex item #4</span>
</div>
</div>
</div>
<span class="page__demo-caption">the flex items after adding position: absolute flex items #2 and #3 when the parent has flex-direction: row</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-column">
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the flex item #1</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the flex item #2</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the flex item #3</span>
</div>
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the flex item #4</span>
</div>
</div>
</div>
<span class="page__demo-caption">the flex items before adding position: absolute flex items #2 and #3 when the parent has flex-direction: column</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: .75rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-column">
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the flex item #1</span>
</div>
<div class="demo-box position-absolute">
<span class="demo-box__text">I'm the flex item #2</span>
</div>
<div class="demo-box position-absolute">
<span class="demo-box__text">I'm the flex item #3</span>
</div>
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the flex item #4</span>
</div>
</div>
</div>
<span class="page__demo-caption">the flex items after adding position: absolute flex items #2 and #3 when the parent has flex-direction: column</span>
</div>
</div>
<p>
<span class="page__point">15</span>
If we defined the width and height properties to flex items we won't get any changes after adding position: absolute to them.
</p>
<p class="ha-screen-reader">The width and height properties with the 148px value will continue to work after adding position absolute. As a result browser will display square.</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-row">
<div class="demo-box demo-box_with-sizes">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">width: 148px and height: 148px are applied to the flex item before adding position: absolute</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 9rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-row">
<div class="demo-box demo-box_with-sizes position-absolute">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">width: 148px and height: 148px are applied to the flex item after adding position: absolute</span>
</div>
</div>
<p>
<span class="page__point">16</span>
The padding, border and margin properties continue working without changes when adding position: absolute to flex items.
</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-row">
<div class="demo-box is-padding">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">paddings before adding position: absolute when the parent has flex-direction: row</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 3rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-row">
<div class="demo-box is-padding position-absolute">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">paddings after adding position: absolute when the parent has flex-direction: row</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-column">
<div class="demo-box is-padding">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">paddings before adding position: absolute when the parent has flex-direction: column</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 3rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-column">
<div class="demo-box is-padding position-absolute">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">paddings after adding position: absolute when the parent has flex-direction: column</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-row">
<div class="demo-box is-border">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">borders before adding position: absolute when the parent has flex-direction: row</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 3rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-row">
<div class="demo-box is-border position-absolute">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">borders after adding position: absolute when the parent has flex-direction: row</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-column">
<div class="demo-box is-border">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">borders before adding position: absolute when the parent has flex-direction: column</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 3rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-column">
<div class="demo-box is-border position-absolute">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">borders after adding position: absolute when the parent has flex-direction: column</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-row">
<div class="demo-box is-margin">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">margins before adding position: absolute when the parent has flex-direction: row</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 3rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-row">
<div class="demo-box is-margin position-absolute">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">margins after adding position: absolute when the parent has flex-direction: row</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-column">
<div class="demo-box is-margin">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">margins before adding position: absolute when the parent has flex-direction: column</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 3rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-column">
<div class="demo-box is-margin position-absolute">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">margins after adding position: absolute when the parent has flex-direction: column</span>
</div>
</div>
</section>
<section id="fixed-tab" aria-labelledby="fixed" role="tabpanel" tabindex="0" class="page__content" hidden>
<div class="page__remark">
<p>
Folks, I disabled default position relative to the viewport in examples using filter: opacity(1) because that helps me to show another behavior nuances. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/position" target="_top">the fixed value in the Values section</a> for more details
</p>
</div>
<h3>The block values</h3>
<div class="page__remark">
<p>
Note! I mean the block values are the block, flex and grid value
</p>
</div>
<p>
<span class="page__point">1</span>
When we add position: fixed to all childs they fall out of the parent, i.e it's the height property will be set to 0px.
</p>
<p class="ha-screen-reader">The parent height is collapsed after adding position fixed to a child element.</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box">
<span class="demo-box__text">I'm the item with display: block</span>
</div>
</div>
</div>
<span class="page__demo-caption">the height property of the parent before adding position: fixed to childs</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 2.25rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport page__demo-viewport-fixed">
<div class="demo-box position-fixed">
<span class="demo-box__text">I'm the item with display: block</span>
</div>
</div>
</div>
<span class="page__demo-caption">the height property of the parent after adding position: fixed to childs</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box display-flex">
<span class="demo-box__text">I'm the item with display: flex</span>
</div>
</div>
</div>
<span class="page__demo-caption">the height property of the parent before adding position: fixed to childs</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 2.25rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport page__demo-viewport-fixed">
<div class="demo-box display-flex position-fixed">
<span class="demo-box__text">I'm the item with display: flex</span>
</div>
</div>
</div>
<span class="page__demo-caption">the height property of the parent after adding position: fixed to childs</span>
</div>
</div>
<p>
If position: fixed is set to the part of childs the parent height is computed depending on the height of childs without position: fixed.
</p>
<p class="ha-screen-reader">Two child elements are displayed in a column. The second has position fixed, the first does not. The parent height is computed depending on the height of the first element.</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: block #1</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the item with display: block #2</span>
</div>
</div>
</div>
<span class="page__demo-caption">the height property of the parent before adding position: fixed to item #2</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 2.25rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport page__demo-viewport-fixed">
<div class="page__demo-viewport page__demo-viewport-fixed">
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: block #1</span>
</div>
<div class="demo-box position-fixed">
<span class="demo-box__text">I'm the item with display: block #2</span>
</div>
</div>
</div>
</div>
<span class="page__demo-caption">the height property of the parent after adding position: fixed to item #2</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box demo-box_accent display-grid">
<span class="demo-box__text">I'm the item with display: grid #1</span>
</div>
<div class="demo-box display-grid">
<span class="demo-box__text">I'm the item with display: grid #2</span>
</div>
</div>
</div>
<span class="page__demo-caption">the height property of the parent before adding position: fixed to childs</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 2.25rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport page__demo-viewport-fixed">
<div class="demo-box demo-box_accent display-grid">
<span class="demo-box__text">I'm the item with display: grid #1</span>
</div>
<div class="demo-box display-grid position-fixed">
<span class="demo-box__text">I'm the item with display: grid #2</span>
</div>
</div>
</div>
<span class="page__demo-caption">the height property of the parent after adding position: fixed to childs</span>
</div>
</div>
<p>
<span class="page__point">2</span>
Adding position: fixed doesn't change the display computed value. All values are saved.
</p>
<p class="ha-screen-reader">There are elements with display block, display flex, display grid and display table. These values don't change after adding position fixed to the element.</p>
<div class="page__remark">
<p>
Note! Please, check the Computed tab on devTools to see how a browser changes a computed value for the display property
</p>
</div>
<div class="page__demos" style="--demo-caption-gap: 2.25rem" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport page__demo-viewport-fixed">
<div class="demo-box position-fixed">
<span class="demo-box__text">I'm the item with display: block</span>
</div>
</div>
</div>
<span class="page__demo-caption">the block value is saved</span>
</div>
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport page__demo-viewport-fixed">
<div class="demo-box display-flex position-fixed">
<span class="demo-box__text">I'm the item with display: flex</span>
</div>
</div>
</div>
<span class="page__demo-caption">the flex value is saved</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 2.25rem" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport page__demo-viewport-fixed">
<div class="demo-box display-grid position-fixed">
<span class="demo-box__text">I'm the item with display: grid</span>
</div>
</div>
</div>
<span class="page__demo-caption">the grid value is saved</span>
</div>
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport page__demo-viewport-fixed">
<div class="demo-box display-table position-fixed">
<span class="demo-box__text">I'm the item with display: table</span>
</div>
</div>
</div>
<span class="page__demo-caption">the table value is saved</span>
</div>
</div>
<p>
<span class="page__point">3</span>
The width and height properties of elements with position: fixed are computed depending on content. Therefore the width property of elements with display: block stops to fill up all available space by the text direction.
</p>
<p class="ha-screen-reader">The width of the element with display block has shrunk to the width of the text after position fixed.</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box">
<span class="demo-box__text">I'm the item with display: block</span>
</div>
</div>
</div>
<span class="page__demo-caption">the width and height properties before adding position: fixed</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 3rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport page__demo-viewport-fixed">
<div class="demo-box position-fixed">
<span class="demo-box__text">I'm the item with display: block</span>
</div>
</div>
</div>
<span class="page__demo-caption">the width and height properties after adding position: fixed</span>
</div>
</div>
<p>
<span class="page__point">4</span>
Since the width and height properties can be applied to elements with block values we don't get some changes when we add position: fixed to them.
</p>
<p class="ha-screen-reader">The width and height properties with the 148px value will start to work after adding position fixed. As a result browser will display square.</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box demo-box_with-sizes">
<span class="demo-box__text">I'm the item with display: block</span>
</div>
</div>
</div>
<span class="page__demo-caption">width: 148px and height: 148px are applied to the item before adding position: fixed</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 9rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport page__demo-viewport-fixed">
<div class="demo-box demo-box_with-sizes position-fixed">
<span class="demo-box__text">I'm the item with display: block</span>
</div>
</div>
</div>
<span class="page__demo-caption">width: 148px and height: 148px are applied to the item after adding position: fixed</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box demo-box_with-sizes display-flex">
<span class="demo-box__text">I'm the item with display: flex</span>
</div>
</div>
</div>
<span class="page__demo-caption">width: 148px and height: 148px are applied to the item before adding position: fixed</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 9rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport page__demo-viewport-fixed">
<div class="demo-box demo-box_with-sizes display-flex position-fixed">
<span class="demo-box__text">I'm the item with display: flex</span>
</div>
</div>
</div>
<span class="page__demo-caption">width: 148px and height: 148px are applied to the item after adding position: fixed</span>
</div>
</div>
<p>
<span class="page__point">5</span>
The padding and border properties work without changes for elements after adding position: fixed.
</p>
<div class="page__demos" style="--demo-caption-gap: .75rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box is-padding">
<span class="demo-box__text">I'm the item with display: block</span>
</div>
</div>
</div>
<span class="page__demo-caption">paddings before adding position: fixed</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 3.5rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport page__demo-viewport-fixed">
<div class="demo-box is-padding position-fixed">
<span class="demo-box__text">I'm the item with display: block</span>
</div>
</div>
</div>
<span class="page__demo-caption">paddings after adding position: fixed</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: .75rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box is-padding display-grid">
<span class="demo-box__text">I'm the item with display: grid</span>
</div>
</div>
</div>
<span class="page__demo-caption">paddings before adding position: fixed</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 3.5rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport page__demo-viewport-fixed">
<div class="demo-box is-padding display-grid position-fixed">
<span class="demo-box__text">I'm the item with display: grid</span>
</div>
</div>
</div>
<span class="page__demo-caption">paddings after adding position: fixed</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: .75rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box is-border">
<span class="demo-box__text">I'm the item with display: block</span>
</div>
</div>
</div>
<span class="page__demo-caption">borders before adding position: fixed</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 3.5rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport page__demo-viewport-fixed">
<div class="demo-box is-border position-fixed">
<span class="demo-box__text">I'm the item with display: block</span>
</div>
</div>
</div>
<span class="page__demo-caption">borders after adding position: fixed</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: .75rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box is-border display-grid">
<span class="demo-box__text">I'm the item with display: grid</span>
</div>
</div>
</div>
<span class="page__demo-caption">borders before adding position: fixed</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 3.5rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport page__demo-viewport-fixed">
<div class="demo-box is-border display-grid position-fixed">
<span class="demo-box__text">I'm the item with display: grid</span>
</div>
</div>
</div>
<span class="page__demo-caption">borders after adding position: fixed</span>
</div>
</div>
<p>
Margin Collapsing of the elements with block values stop to work. Vertical margins don't extend beyond the parent. Margins between the elements don't collapse.
</p>
<p class="ha-screen-reader">The elements with margins overlap on each other after adding position fixed.</p>
<div class="page__demos" style="--demo-caption-gap: .75rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box is-margin">
<span class="demo-box__text">I'm the item with display: block #1</span>
</div>
<div class="demo-box is-margin">
<span class="demo-box__text">I'm the item with display: block #2</span>
</div>
</div>
</div>
<span class="page__demo-caption">margins before adding position: fixed</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 3.5rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport page__demo-viewport-fixed">
<div class="demo-box is-margin position-fixed">
<span class="demo-box__text">I'm the item with display: block #1</span>
</div>
<div class="demo-box is-margin position-fixed">
<span class="demo-box__text">I'm the item with display: block #2</span>
</div>
</div>
</div>
<span class="page__demo-caption">margins after adding position: fixed</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: .75rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box is-margin display-flex">
<span class="demo-box__text">I'm the item with display: flex #1</span>
</div>
<div class="demo-box is-margin display-flex">
<span class="demo-box__text">I'm the item with display: flex #2</span>
</div>
</div>
</div>
<span class="page__demo-caption">margins before adding position: fixed</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 3.5rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport page__demo-viewport-fixed">
<div class="demo-box is-margin display-flex position-fixed">
<span class="demo-box__text">I'm the item with display: flex #1</span>
</div>
<div class="demo-box is-margin display-flex position-fixed">
<span class="demo-box__text">I'm the item with display: flex #2</span>
</div>
</div>
</div>
<span class="page__demo-caption">margins after adding position: fixed</span>
</div>
</div>
<p>
<span class="page__point">6</span>
Elements with block values are positioned in a column by default. When adding position: fixed they will be shifted according to a defined algorithm.
</p>
<p>
The first element in HTML saves a start position. The remaining elements shift in such a way that they are one above the other. The first element in HTML will be the bottom and the last element — the top.
</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box">
<span class="demo-box__text">I'm the item with display: block #1</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the item with display: block #2</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the item with display: block #3</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the item with display: block #4</span>
</div>
</div>
</div>
<span class="page__demo-caption">the items are positioned in a column before adding position: fixed</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 3rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport page__demo-viewport-fixed">
<div class="demo-box position-fixed">
<span class="demo-box__text">I'm the item with display: block #1</span>
</div>
<div class="demo-box position-fixed">
<span class="demo-box__text">I'm the item with display: block #2</span>
</div>
<div class="demo-box position-fixed">
<span class="demo-box__text">I'm the item with display: block #3</span>
</div>
<div class="demo-box position-fixed">
<span class="demo-box__text">I'm the item with display: block #4</span>
</div>
</div>
</div>
<span class="page__demo-caption">the items are overlapped after adding position: fixed</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box display-grid">
<span class="demo-box__text">I'm the item with display: grid #1</span>
</div>
<div class="demo-box display-grid">
<span class="demo-box__text">I'm the item with display: grid #2</span>
</div>
<div class="demo-box display-grid">
<span class="demo-box__text">I'm the item with display: grid #3</span>
</div>
<div class="demo-box display-grid">
<span class="demo-box__text">I'm the item with display: grid #4</span>
</div>
</div>
</div>
<span class="page__demo-caption">the items are positioned in a column before adding position: fixed</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 3rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport page__demo-viewport-fixed">
<div class="demo-box display-grid position-fixed">
<span class="demo-box__text">I'm the item with display: grid #1</span>
</div>
<div class="demo-box display-grid position-fixed">
<span class="demo-box__text">I'm the item with display: grid #2</span>
</div>
<div class="demo-box display-grid position-fixed">
<span class="demo-box__text">I'm the item with display: grid #3</span>
</div>
<div class="demo-box display-grid position-fixed">
<span class="demo-box__text">I'm the item with display: grid #4</span>
</div>
</div>
</div>
<span class="page__demo-caption">the items are overlapped after adding position: fixed</span>
</div>
</div>
<p>
Elements with position: fixed can't overlap nearby elements without position: fixed that are before them.
</p>
<p>
The first element with position: fixed will be after the last element without. Other nearby elements with position: fixed will overlap the first.
</p>
<p class="ha-screen-reader">There are 4 elements, the first two elements don't have position fixed and the 3 and 4 have. The 1 and 2 elements are displayed below each other in a column. The 3 and 4 elements overlap on each other and display below the 2 element.</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: block #1</span>
</div>
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: block #2</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the item with display: block #3</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the item with display: block #4</span>
</div>
</div>
</div>
<span class="page__demo-caption">the items before adding position: fixed to items #3 and #4</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 2.75rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport page__demo-viewport-fixed">
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: block #1</span>
</div>
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: block #2</span>
</div>
<div class="demo-box position-fixed">
<span class="demo-box__text">I'm the item with display: block #3</span>
</div>
<div class="demo-box position-fixed">
<span class="demo-box__text">I'm the item with display: block #4</span>
</div>
</div>
</div>
<span class="page__demo-caption">the items after adding position: fixed to items #3 and #4</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box demo-box_accent display-flex">
<span class="demo-box__text">I'm just the item with display: flex #1</span>
</div>
<div class="demo-box demo-box_accent display-flex">
<span class="demo-box__text">I'm just the item with display: flex #2</span>
</div>
<div class="demo-box display-flex">
<span class="demo-box__text">I'm the item with display: flex #3</span>
</div>
<div class="demo-box display-flex">
<span class="demo-box__text">I'm the item with display: flex #4</span>
</div>
</div>
</div>
<span class="page__demo-caption">the items before adding position: fixed to items #3 and #4</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 2.75rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport page__demo-viewport-fixed">
<div class="demo-box demo-box_accent display-flex">
<span class="demo-box__text">I'm just the item with display: flex #1</span>
</div>
<div class="demo-box demo-box_accent display-flex">
<span class="demo-box__text">I'm just the item with display: flex #2</span>
</div>
<div class="demo-box display-flex position-fixed">
<span class="demo-box__text">I'm the item with display: flex #3</span>
</div>
<div class="demo-box display-flex position-fixed">
<span class="demo-box__text">I'm the item with display: flex #4</span>
</div>
</div>
</div>
<span class="page__demo-caption">the items after adding position: fixed to items #3 and #4</span>
</div>
</div>
<p>
Elements with position: fixed will overlap following nearby elements because they will shift. The gap of shifting will be equal to the sum of the sizes of the elements with position: fixed.
</p>
<p class="ha-screen-reader">There are 4 elements, the 1 and 4 elements don't have position fixed and the 2 and 3 have. The 1 and 4 elements are displayed below each other in a column. The 2 and 3 elements overlap on each other and display above the 4 element.</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: block #1</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the item with display: block #2</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the item with display: block #3</span>
</div>
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: block #4</span>
</div>
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: block #5</span>
</div>
</div>
</div>
<span class="page__demo-caption">the items before adding position: fixed to items #2 and #3</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport page__demo-viewport-fixed">
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: block #1</span>
</div>
<div class="demo-box position-fixed">
<span class="demo-box__text">I'm the item with display: block #2</span>
</div>
<div class="demo-box position-fixed">
<span class="demo-box__text">I'm the item with display: block #3</span>
</div>
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: block #4</span>
</div>
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: block #5</span>
</div>
</div>
</div>
<span class="page__demo-caption">the items after adding position: fixed to items #2 and #3</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box demo-box_accent display-grid">
<span class="demo-box__text">I'm just the item with display: grid #1</span>
</div>
<div class="demo-box display-grid">
<span class="demo-box__text">I'm the item with display: grid #2</span>
</div>
<div class="demo-box display-grid">
<span class="demo-box__text">I'm the item with display: grid #3</span>
</div>
<div class="demo-box demo-box_accent display-grid">
<span class="demo-box__text">I'm just the item with display: grid #4</span>
</div>
<div class="demo-box demo-box_accent display-grid">
<span class="demo-box__text">I'm just the item with display: grid #5</span>
</div>
</div>
</div>
<span class="page__demo-caption">the items before adding position: fixed to items #2 and #3</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport page__demo-viewport-fixed">
<div class="demo-box demo-box_accent display-grid">
<span class="demo-box__text">I'm just the item with display: grid #1</span>
</div>
<div class="demo-box display-grid position-fixed">
<span class="demo-box__text">I'm the item with display: grid #2</span>
</div>
<div class="demo-box display-grid position-fixed">
<span class="demo-box__text">I'm the item with display: grid #3</span>
</div>
<div class="demo-box demo-box_accent display-grid">
<span class="demo-box__text">I'm just the item with display: grid #4</span>
</div>
<div class="demo-box demo-box_accent display-grid">
<span class="demo-box__text">I'm just the item with display: grid #5</span>
</div>
</div>
</div>
<span class="page__demo-caption">the items after adding position: fixed to items #2 and #3</span>
</div>
</div>
<h3>The inline values</h3>
<div class="page__remark">
<p>
Note! I mean the inline values are the inline, inline-block, inline-flex and inline-grid value
</p>
</div>
<p>
<span class="page__point">7</span>
As with block values when adding position: fixed to all childs the parent height is set to 0px.
</p>
<p class="ha-screen-reader">The parent height is collapsed after adding position fixed to a child element.</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box">
<span class="demo-box__text">I'm the item with display: inline</span>
</span>
</div>
</div>
<span class="page__demo-caption">the height property of the parent before adding position: fixed to childs</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 3rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport page__demo-viewport-fixed">
<span class="demo-box position-fixed">
<span class="demo-box__text">I'm the item with display: inline</span>
</span>
</div>
</div>
<span class="page__demo-caption">the height property of the parent after adding position: fixed to childs</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box display-inline-block">
<span class="demo-box__text">I'm the item with display: inline-block</span>
</span>
</div>
</div>
<span class="page__demo-caption">the height property of the parent before adding position: fixed to childs</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 3rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport page__demo-viewport-fixed">
<span class="demo-box display-inline-block position-fixed">
<span class="demo-box__text">I'm the item with display: inline-block</span>
</span>
</div>
</div>
<span class="page__demo-caption">the height property of the parent after adding position: fixed to childs</span>
</div>
</div>
<p>
When adding position: fixed to a part of childs the parent height will be computed by depending on the height childs without position: fixed.
</p>
<p class="ha-screen-reader">Five child elements are displayed in a two lines row. The last has position fixed, other do not. The parent height is computed depending on the height of two lines because elements without position fixed take up this space.</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box demo-box_accent">
<span class="demo-box__text">I'm the item with display: inline #1</span>
</span>
<span class="demo-box demo-box_accent">
<span class="demo-box__text">I'm the item with display: inline #2</span>
</span>
<span class="demo-box demo-box_accent">
<span class="demo-box__text">I'm the item with display: inline #3</span>
</span>
<span class="demo-box demo-box_accent">
<span class="demo-box__text">I'm the item with display: inline #4</span>
</span>
<span class="demo-box">
<span class="demo-box__text">I'm the item with display: inline #5</span>
</span>
</div>
</div>
<span class="page__demo-caption">the height property of the parent before adding position: fixed to childs</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: .5rem;">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport page__demo-viewport-fixed">
<span class="demo-box demo-box_accent">
<span class="demo-box__text">I'm the item with display: inline #1</span>
</span>
<span class="demo-box demo-box_accent">
<span class="demo-box__text">I'm the item with display: inline #2</span>
</span>
<span class="demo-box demo-box_accent">
<span class="demo-box__text">I'm the item with display: inline #3</span>
</span>
<span class="demo-box demo-box_accent">
<span class="demo-box__text">I'm the item with display: inline #4</span>
</span>
<span class="demo-box position-fixed">
<span class="demo-box__text">I'm the item with display: inline #5</span>
</span>
</div>
</div>
<span class="page__demo-caption">the height property of the parent after adding position: fixed to childs</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box demo-box_accent display-inline-block">
<span class="demo-box__text">I'm the item with display: inline-block #1</span>
</span>
<span class="demo-box demo-box_accent display-inline-block">
<span class="demo-box__text">I'm the item with display: inline-block #2</span>
</span>
<span class="demo-box demo-box_accent display-inline-block">
<span class="demo-box__text">I'm the item with display: inline-block #3</span>
</span>
<span class="demo-box demo-box_accent display-inline-block">
<span class="demo-box__text">I'm the item with display: inline-block #4</span>
</span>
<span class="demo-box display-inline-block">
<span class="demo-box__text">I'm the item with display: inline-block #5</span>
</span>
</div>
</div>
<span class="page__demo-caption">the height property of the parent before adding position: fixed to childs</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 2.5rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport page__demo-viewport-fixed">
<span class="demo-box demo-box_accent display-inline-block">
<span class="demo-box__text">I'm the item with display: inline-block #1</span>
</span>
<span class="demo-box demo-box_accent display-inline-block">
<span class="demo-box__text">I'm the item with display: inline-block #2</span>
</span>
<span class="demo-box demo-box_accent display-inline-block">
<span class="demo-box__text">I'm the item with display: inline-block #3</span>
</span>
<span class="demo-box demo-box_accent display-inline-block">
<span class="demo-box__text">I'm the item with display: inline-block #4</span>
</span>
<span class="demo-box position-fixed display-inline-block">
<span class="demo-box__text">I'm the item with display: inline-block #5</span>
</span>
</div>
</div>
<span class="page__demo-caption">the height property of the parent after adding position: fixed to childs</span>
</div>
</div>
<p>
<span class="page__point">8</span>
All inline values will be changed on block values. So the inline and inline-block will be changed to block, inline-flex -> flex, inline-grid -> grid and inline-table -> table.
</p>
<div class="page__demos" style="--demo-caption-gap: 2.25rem" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport page__demo-viewport-fixed">
<span class="demo-box position-fixed">
<span class="demo-box__text">I'm the item with display: inline</span>
</span>
</div>
</div>
<span class="page__demo-caption">the inline value is changed to the block value</span>
</div>
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport page__demo-viewport-fixed">
<div class="demo-box display-inline-block position-fixed">
<span class="demo-box__text">I'm the item with display: inline-block</span>
</div>
</div>
</div>
<span class="page__demo-caption">the inline-block value is changed to the block value</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 2.25rem" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport page__demo-viewport-fixed">
<span class="demo-box display-inline-flex position-fixed">
<span class="demo-box__text">I'm the item with display: inline-flex</span>
</span>
</div>
</div>
<span class="page__demo-caption">the inline-flex value is changed to the flex value</span>
</div>
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport page__demo-viewport-fixed">
<div class="demo-box display-inline-grid position-fixed">
<span class="demo-box__text">I'm the item with display: inline-grid</span>
</div>
</div>
</div>
<span class="page__demo-caption">the inline-grid value is changed to the grid value</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 2.25rem" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport page__demo-viewport-fixed">
<span class="demo-box display-inline-table position-fixed">
<span class="demo-box__text">I'm the item with display: inline-table</span>
</span>
</div>
</div>
<span class="page__demo-caption">the inline-table value is changed to the table value</span>
</div>
</div>
<p>
<span class="page__point">9</span>
By default, the width and height properties of elements with display: inline are computed depending on content. That behavior is saved but after adding position: fixed the auto value of these properties is changed to pixels.
</p>
<p class="ha-screen-reader">The element with display inline will be displayed the same after adding position fixed.</p>
<div class="page__remark" aria-hidden="true">
<p>
Note! Please, check the Computed tab on devTools to see how a browser changes a computed value for the width and height properties
</p>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box">
<span class="demo-box__text">I'm the item with display: inline</span>
</span>
</div>
</div>
<span class="page__demo-caption">the width and height properties are defined in the auto value before adding position: fixed</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 2.25rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport page__demo-viewport-fixed">
<span class="demo-box position-fixed">
<span class="demo-box__text">I'm the item with display: inline</span>
</span>
</div>
</div>
<span class="page__demo-caption">the width and height properties are defined in pixels after adding position: fixed</span>
</div>
</div>
<p>
<span class="page__point">10</span>
As well as these properties can't be applied to elements with display: inline. But adding position: fixed changes that. They are applied.
</p>
<p class="ha-screen-reader">The width and height properties with the 148px value will start to work after adding position fixed. As a result browser will display square.</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box demo-box_with-sizes">
<span class="demo-box__text">I'm the item with display: inline</span>
</span>
</div>
</div>
<span class="page__demo-caption">width: 148px and height: 148px are applied to the item before adding position: fixed</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 9rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport page__demo-viewport-fixed">
<span class="demo-box demo-box_with-sizes position-fixed">
<span class="demo-box__text">I'm the item with display: inline</span>
</span>
</div>
</div>
<span class="page__demo-caption">width: 148px and height: 148px are applied to the item after adding position: fixed</span>
</div>
</div>
<p>
But these properties are applied to elements with all other inline-* values. So we won't get any changes after adding position: fixed.
</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box demo-box_with-sizes display-inline-flex">
<span class="demo-box__text">I'm the item with display: inline-flex</span>
</span>
</div>
</div>
<span class="page__demo-caption">width: 148px and height: 148px are applied to the item before adding position: fixed</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 9rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport page__demo-viewport-fixed">
<span class="demo-box demo-box_with-sizes display-inline-flex position-fixed">
<span class="demo-box__text">I'm the item with display: inline-flex</span>
</span>
</div>
</div>
<span class="page__demo-caption">width: 148px and height: 148px are applied to the item after adding position: fixed</span>
</div>
</div>
<p>
<span class="page__point">11</span>
The vertical paddings, borders and margins of elements with display: inline stop to extend beyond the parent after adding position: fixed.
</p>
<div class="page__demos" style="--demo-caption-gap: 1.25rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box is-padding">
<span class="demo-box__text">I'm the item with display: inline</span>
</span>
</div>
</div>
<span class="page__demo-caption">paddings before adding position: fixed</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 3.5rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport page__demo-viewport-fixed">
<span class="demo-box is-padding position-fixed">
<span class="demo-box__text">I'm the item with display: inline</span>
</span>
</div>
</div>
<span class="page__demo-caption">paddings after adding position: fixed</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 1.25rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box is-border">
<span class="demo-box__text">I'm the item with display: inline</span>
</span>
</div>
</div>
<span class="page__demo-caption">borders before adding position: fixed</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 3.5rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport page__demo-viewport-fixed">
<span class="demo-box is-border position-fixed">
<span class="demo-box__text">I'm the item with display: inline</span>
</span>
</div>
</div>
<span class="page__demo-caption">borders after adding position: fixed</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 1.25rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box is-margin">
<span class="demo-box__text">I'm the item with display: inline</span>
</span>
</div>
</div>
<span class="page__demo-caption">margins before adding position: fixed</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 3.5rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport page__demo-viewport-fixed">
<span class="demo-box is-margin position-fixed">
<span class="demo-box__text">I'm the item with display: inline</span>
</span>
</div>
</div>
<span class="page__demo-caption">margins after adding position: fixed</span>
</div>
</div>
<p>
The same properties for the elements with display: inline-* don't extend beyond the parent. So there aren't changes after adding position: fixed.
</p>
<div class="page__demos" style="--demo-caption-gap: 1.25rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box is-padding display-inline-grid">
<span class="demo-box__text">I'm the item with display: inline-grid</span>
</span>
</div>
</div>
<span class="page__demo-caption">paddings before adding position: fixed</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 3.5rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport page__demo-viewport-fixed">
<span class="demo-box is-padding display-inline-grid position-fixed">
<span class="demo-box__text">I'm the item with display: inline-grid</span>
</span>
</div>
</div>
<span class="page__demo-caption">paddings after adding position: fixed</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 1.25rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box is-border display-inline-grid">
<span class="demo-box__text">I'm the item with display: inline-grid</span>
</span>
</div>
</div>
<span class="page__demo-caption">borders before adding position: fixed</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 3.5rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport page__demo-viewport-fixed">
<span class="demo-box is-border display-inline-grid position-fixed">
<span class="demo-box__text">I'm the item with display: inline-grid</span>
</span>
</div>
</div>
<span class="page__demo-caption">borders after adding position: fixed</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 1.25rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box is-margin display-inline-grid">
<span class="demo-box__text">I'm the item with display: inline-grid</span>
</span>
</div>
</div>
<span class="page__demo-caption">margins before adding position: fixed</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 3.5rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport page__demo-viewport-fixed">
<span class="demo-box is-margin display-inline-flex position-fixed">
<span class="demo-box__text">I'm the item with display: inline-grid</span>
</span>
</div>
</div>
<span class="page__demo-caption">margins after adding position: fixed</span>
</div>
</div>
<p>
<span class="page__point">12</span>
Elements with inline values for the display property are positioned in a row by default. When adding position: fixed they will be shifted in such a way as for elements with block values.
</p>
<p>
They will be displayed each other. The first element will be the bottom and the last element — the top.
</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box">
<span class="demo-box__text">I'm the item with display: inline #1</span>
</span>
<span class="demo-box">
<span class="demo-box__text">I'm the item with display: inline #2</span>
</span>
<span class="demo-box">
<span class="demo-box__text">I'm the item with display: inline #3</span>
</span>
<span class="demo-box">
<span class="demo-box__text">I'm the item with display: inline #4</span>
</span>
</div>
</div>
<span class="page__demo-caption">the items are positioned in a row before adding position: fixed</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 3rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport page__demo-viewport-fixed">
<span class="demo-box position-fixed">
<span class="demo-box__text">I'm the item with display: inline #1</span>
</span>
<span class="demo-box position-fixed">
<span class="demo-box__text">I'm the item with display: inline #2</span>
</span>
<span class="demo-box position-fixed">
<span class="demo-box__text">I'm the item with display: inline #3</span>
</span>
<span class="demo-box position-fixed">
<span class="demo-box__text">I'm the item with display: inline #4</span>
</span>
</div>
</div>
<span class="page__demo-caption">the items are overlapped after adding position: fixed</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box display-inline-flex">
<span class="demo-box__text">I'm the item with display: inline-flex #1</span>
</span>
<span class="demo-box display-inline-flex">
<span class="demo-box__text">I'm the item with display: inline-flex #2</span>
</span>
<span class="demo-box display-inline-flex">
<span class="demo-box__text">I'm the item with display: inline-flex #3</span>
</span>
<span class="demo-box display-inline-flex">
<span class="demo-box__text">I'm the item with display: inline-flex #4</span>
</span>
</div>
</div>
<span class="page__demo-caption">the items are positioned in a row before adding position: fixed</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 3rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport page__demo-viewport-fixed">
<span class="demo-box display-inline-flex position-fixed">
<span class="demo-box__text">I'm the item with display: inline-flex #1</span>
</span>
<span class="demo-box display-inline-flex position-fixed">
<span class="demo-box__text">I'm the item with display: inline-flex #2</span>
</span>
<span class="demo-box display-inline-flex position-fixed">
<span class="demo-box__text">I'm the item with display: inline-flex #3</span>
</span>
<span class="demo-box display-inline-flex position-fixed">
<span class="demo-box__text">I'm the item with display: inline-flex #4</span>
</span>
</div>
</div>
<span class="page__demo-caption">the items are overlapped after adding position: fixed</span>
</div>
</div>
<p>
They also can't overlap the elements before them. The first element with position: fixed will be after the last element without. Other nearby elements with position: fixed will overlap the first.
</p>
<p class="ha-screen-reader">There are 4 elements, the first two elements don't have position fixed and the 3 and 4 have. The 1 and 2 elements are displayed each other in a row. The 3 and 4 elements overlap on each other and display after the 2 element.</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: inline #1</span>
</span>
<span class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: inline #2</span>
</span>
<span class="demo-box">
<span class="demo-box__text">I'm the item with display: inline #3</span>
</span>
<span class="demo-box">
<span class="demo-box__text">I'm the item with display: inline #4</span>
</span>
</div>
</div>
<span class="page__demo-caption">the items before adding position: fixed to items #3 and #4</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 2rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport page__demo-viewport-fixed">
<span class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: inline #1</span>
</span>
<span class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: inline #2</span>
</span>
<span class="demo-box position-fixed">
<span class="demo-box__text">I'm the item with display: inline #3</span>
</span>
<span class="demo-box position-fixed">
<span class="demo-box__text">I'm the item with display: inline #4</span>
</span>
</div>
</div>
<span class="page__demo-caption">the items after adding position: fixed to items #3 and #4</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box demo-box_accent display-inline-grid">
<span class="demo-box__text">I'm just the item with display: inline-grid #1</span>
</span>
<span class="demo-box demo-box_accent display-inline-grid">
<span class="demo-box__text">I'm just the item with display: inline-grid #2</span>
</span>
<span class="demo-box display-inline-grid">
<span class="demo-box__text">I'm the item with display: inline-grid #3</span>
</span>
<span class="demo-box display-inline-grid">
<span class="demo-box__text">I'm the item with display: inline-grid #4</span>
</span>
</div>
</div>
<span class="page__demo-caption">the items before adding position: fixed to items #3 and #4</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 2rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport page__demo-viewport-fixed">
<span class="demo-box demo-box_accent display-inline-grid">
<span class="demo-box__text">I'm just the item with display: inline-grid #1</span>
</span>
<span class="demo-box display-inline-grid demo-box_accent">
<span class="demo-box__text">I'm just the item with display: inline-grid #2</span>
</span>
<span class="demo-box display-inline-grid position-fixed">
<span class="demo-box__text">I'm the item with display: inline-grid #3</span>
</span>
<span class="demo-box display-inline-grid position-fixed">
<span class="demo-box__text">I'm the item with display: inline-grid #4</span>
</span>
</div>
</div>
<span class="page__demo-caption">the items after adding position: fixed to items #3 and #4</span>
</div>
</div>
<p>
When adding position: fixed to some elements remaining elements will be shifted. They will be overlapped as well.
</p>
<p class="ha-screen-reader">There are 4 elements, the 1 and 4 elements don't have position fixed and the 2 and 3 have. The 1 and 4 elements are displayed each other in a row. The 2 and 3 elements overlap on each other and display above the 4 element.</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: inline #1</span>
</span>
<span class="demo-box">
<span class="demo-box__text">I'm the item with display: inline #2</span>
</span>
<span class="demo-box">
<span class="demo-box__text">I'm the item with display: inline #3</span>
</span>
<span class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: inline #4</span>
</span>
<span class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: inline #5</span>
</span>
</div>
</div>
<span class="page__demo-caption">the items before adding position: fixed to items #2 and #3</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport page__demo-viewport-fixed">
<span class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: inline #1</span>
</span>
<span class="demo-box position-fixed">
<span class="demo-box__text">I'm the item with display: inline #2</span>
</span>
<span class="demo-box position-fixed">
<span class="demo-box__text">I'm the item with display: inline #3</span>
</span>
<span class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: inline #4</span>
</span>
<span class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: inline #5</span>
</span>
</div>
</div>
<span class="page__demo-caption">the items after adding position: fixed to items #2 and #3</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box demo-box_accent display-inline-flex">
<span class="demo-box__text">I'm just the item with display: inline-flex #1</span>
</span>
<span class="demo-box display-inline-flex">
<span class="demo-box__text">I'm the item with display: inline-flex #2</span>
</span>
<span class="demo-box display-inline-flex">
<span class="demo-box__text">I'm the item with display: inline-flex #3</span>
</span>
<span class="demo-box demo-box_accent display-inline-flex">
<span class="demo-box__text">I'm just the item with display: inline-flex #4</span>
</span>
<span class="demo-box demo-box_accent display-inline-flex">
<span class="demo-box__text">I'm just the item with display: inline-flex #5</span>
</span>
</div>
</div>
<span class="page__demo-caption">the items before adding position: fixed to items #2 and #3</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport page__demo-viewport-fixed">
<span class="demo-box demo-box_accent display-inline-flex">
<span class="demo-box__text">I'm just the item with display: inline-flex #1</span>
</span>
<span class="demo-box display-inline-flex position-fixed">
<span class="demo-box__text">I'm the item with display: inline-flex #2</span>
</span>
<span class="demo-box display-inline-flex position-fixed">
<span class="demo-box__text">I'm the item with display: inline-flex #3</span>
</span>
<span class="demo-box demo-box_accent display-inline-flex">
<span class="demo-box__text">I'm just the item with display: inline-flex #4</span>
</span>
<span class="demo-box demo-box_accent display-inline-flex">
<span class="demo-box__text">I'm just the item with display: inline-flex #5</span>
</span>
</div>
</div>
<span class="page__demo-caption">the items after adding position: fixed to items #2 and #3</span>
</div>
</div>
<h3>Flex items</h3>
<p>
<span class="page__point">13</span>
Flex items stop to stretch by the additional axis when adding position: fixed to them.
</p>
<p class="ha-screen-reader">The width and height properties of the element are computed by text.</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-row">
<div class="demo-box">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">the flex item before adding position: fixed when the parent has flex-direction: row</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 2.25rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport page__demo-viewport-fixed display-flex flex-direction-row">
<div class="demo-box position-fixed">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">the flex item after adding position: fixed when the parent has flex-direction: row</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-column">
<div class="demo-box">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">the flex item before adding position: fixed when the parent has flex-direction: column</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 2.25rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport page__demo-viewport-fixed display-flex flex-direction-column">
<div class="demo-box position-fixed">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">the flex item after adding position: fixed when the parent has flex-direction: column</span>
</div>
</div>
<p>
<span class="page__point">14</span>
In the case position: fixed is added to flex items they will be overlapped at each other.
</p>
<p>
The first element in HTML saves a start position. The remaining elements shift in such a way that they are one above the other. The first element in HTML will be the bottom and the last element — the top.
</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-row">
<div class="demo-box">
<span class="demo-box__text">I'm the flex item #1</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the flex item #2</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the flex item #3</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the flex item #4</span>
</div>
</div>
</div>
<span class="page__demo-caption">the flex items are positioned in a row before adding position: fixed when the parent has flex-direction: row</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 3rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport page__demo-viewport-fixed display-flex flex-direction-row">
<div class="demo-box position-fixed">
<span class="demo-box__text">I'm the flex item #1</span>
</div>
<div class="demo-box position-fixed">
<span class="demo-box__text">I'm the flex item #2</span>
</div>
<div class="demo-box position-fixed">
<span class="demo-box__text">I'm the flex item #3</span>
</div>
<div class="demo-box position-fixed">
<span class="demo-box__text">I'm the flex item #4</span>
</div>
</div>
</div>
<span class="page__demo-caption">the flex items are overlapped after adding position: fixed when the parent has flex-direction: row</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-column">
<div class="demo-box">
<span class="demo-box__text">I'm the flex item #1</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the flex item #2</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the flex item #3</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the flex item #4</span>
</div>
</div>
</div>
<span class="page__demo-caption">the flex items are positioned in a column before adding position: fixed when the parent has flex-direction: column</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 3rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport page__demo-viewport-fixed display-flex flex-direction-column">
<div class="demo-box position-fixed">
<span class="demo-box__text">I'm the flex item #1</span>
</div>
<div class="demo-box position-fixed">
<span class="demo-box__text">I'm the flex item #2</span>
</div>
<div class="demo-box position-fixed">
<span class="demo-box__text">I'm the flex item #3</span>
</div>
<div class="demo-box position-fixed">
<span class="demo-box__text">I'm the flex item #4</span>
</div>
</div>
</div>
<span class="page__demo-caption">the flex items are overlapped after adding position: fixed when the parent has flex-direction: column</span>
</div>
</div>
<p>
Elements with position: fixed can overlap any nearby elements that might be before or after them. They move to the start position of the axis and line up in a column.
</p>
<p class="ha-screen-reader">There are 4 elements, the 1 and 4 elements don't have position fixed and the 2 and 3 have. The 2 and 3 elements overlap on each other and display above the 1 element.</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-row">
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the flex item #1</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the flex item #2</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the flex item #3</span>
</div>
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the flex item #4</span>
</div>
</div>
</div>
<span class="page__demo-caption">the flex items before adding position: fixed flex items #2 and #3 when the parent has flex-direction: row</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: .75rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport page__demo-viewport-fixed display-flex flex-direction-row">
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the flex item #1</span>
</div>
<div class="demo-box position-fixed">
<span class="demo-box__text">I'm the flex item #2</span>
</div>
<div class="demo-box position-fixed">
<span class="demo-box__text">I'm the flex item #3</span>
</div>
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the flex item #4</span>
</div>
</div>
</div>
<span class="page__demo-caption">the flex items after adding position: fixed flex items #2 and #3 when the parent has flex-direction: row</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-column">
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the flex item #1</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the flex item #2</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the flex item #3</span>
</div>
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the flex item #4</span>
</div>
</div>
</div>
<span class="page__demo-caption">the flex items before adding position: fixed flex items #2 and #3 when the parent has flex-direction: column</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: .75rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport page__demo-viewport-fixed display-flex flex-direction-column">
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the flex item #1</span>
</div>
<div class="demo-box position-fixed">
<span class="demo-box__text">I'm the flex item #2</span>
</div>
<div class="demo-box position-fixed">
<span class="demo-box__text">I'm the flex item #3</span>
</div>
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the flex item #4</span>
</div>
</div>
</div>
<span class="page__demo-caption">the flex items after adding position: fixed flex items #2 and #3 when the parent has flex-direction: column</span>
</div>
</div>
<p>
<span class="page__point">15</span>
If we defined the width and height properties to flex items we won't get any changes after adding position: fixed to them.
</p>
<p class="ha-screen-reader">The width and height properties with the 148px value will continue to work after adding position fixed. As a result browser will display square.</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-row">
<div class="demo-box demo-box_with-sizes">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">width: 148px and height: 148px are applied to the flex item before adding position: fixed</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 9rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport page__demo-viewport-fixed display-flex flex-direction-row">
<div class="demo-box demo-box_with-sizes position-fixed">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">width: 148px and height: 148px are applied to the flex item after adding position: fixed</span>
</div>
</div>
<p>
<span class="page__point">16</span>
The padding, border and margin properties continue working without changes when adding position: fixed to flex items.
</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-row">
<div class="demo-box is-padding">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">paddings before adding position: fixed when the parent has flex-direction: row</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 3rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport page__demo-viewport-fixed display-flex flex-direction-row">
<div class="demo-box is-padding position-fixed">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">paddings after adding position: fixed when the parent has flex-direction: row</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-column">
<div class="demo-box is-padding">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">paddings before adding position: fixed when the parent has flex-direction: column</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 3rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport page__demo-viewport-fixed display-flex flex-direction-column">
<div class="demo-box is-padding position-fixed">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">paddings after adding position: fixed when the parent has flex-direction: column</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-row">
<div class="demo-box is-border">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">borders before adding position: fixed when the parent has flex-direction: row</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 3rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport page__demo-viewport-fixed display-flex flex-direction-row">
<div class="demo-box is-border position-fixed">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">borders after adding position: fixed when the parent has flex-direction: row</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-column">
<div class="demo-box is-border">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">borders before adding position: fixed when the parent has flex-direction: column</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 3rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport page__demo-viewport-fixed display-flex flex-direction-column">
<div class="demo-box is-border position-fixed">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">borders after adding position: fixed when the parent has flex-direction: column</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-row">
<div class="demo-box is-margin">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">margins before adding position: fixed when the parent has flex-direction: row</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 3rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport page__demo-viewport-fixed display-flex flex-direction-row">
<div class="demo-box is-margin position-fixed">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">margins after adding position: fixed when the parent has flex-direction: row</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-column">
<div class="demo-box is-margin">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">margins before adding position: fixed when the parent has flex-direction: column</span>
</div>
</div>
<div class="page__demos" style="--demo-caption-gap: 3rem;" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport page__demo-viewport-fixed display-flex flex-direction-column">
<div class="demo-box is-margin position-fixed">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">margins after adding position: fixed when the parent has flex-direction: column</span>
</div>
</div>
</section>
<section id="relative-tab" aria-labelledby="relative" role="tabpanel" tabindex="0" class="page__content" hidden>
<h3>The block values</h3>
<div class="page__remark">
<p>
Note! I mean the block values are the block, flex and grid value
</p>
</div>
<p>
<span class="page__point">1</span>
When we add position: relative to all childs we don't get any changes. The parent height still is computed depending on the childs height.
</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box">
<span class="demo-box__text">I'm the item with display: block</span>
</div>
</div>
</div>
<span class="page__demo-caption">the height property of the parent before adding position: relative to childs</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box position-relative">
<span class="demo-box__text">I'm the item with display: block</span>
</div>
</div>
</div>
<span class="page__demo-caption">the height property of the parent after adding position: relative to childs</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box display-flex">
<span class="demo-box__text">I'm the item with display: flex</span>
</div>
</div>
</div>
<span class="page__demo-caption">the height property of the parent before adding position: relative to childs</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box display-flex position-relative">
<span class="demo-box__text">I'm the item with display: flex</span>
</div>
</div>
</div>
<span class="page__demo-caption">the height property of the parent after adding position: relative to childs</span>
</div>
</div>
<p>
That works if we add position: relative to a part of the childs.
</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: block #1</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the item with display: block #2</span>
</div>
</div>
</div>
<span class="page__demo-caption">the height property of the parent before adding position: relative to item #2</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="page__demo-viewport">
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: block #1</span>
</div>
<div class="demo-box position-relative">
<span class="demo-box__text">I'm the item with display: block #2</span>
</div>
</div>
</div>
</div>
<span class="page__demo-caption">the height property of the parent after adding position: relative to item #2</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box demo-box_accent display-grid">
<span class="demo-box__text">I'm the item with display: grid #1</span>
</div>
<div class="demo-box display-grid">
<span class="demo-box__text">I'm the item with display: grid #2</span>
</div>
</div>
</div>
<span class="page__demo-caption">the height property of the parent before adding position: relative to childs</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box demo-box_accent display-grid">
<span class="demo-box__text">I'm the item with display: grid #1</span>
</div>
<div class="demo-box display-grid position-relative">
<span class="demo-box__text">I'm the item with display: grid #2</span>
</div>
</div>
</div>
<span class="page__demo-caption">the height property of the parent after adding position: relative to childs</span>
</div>
</div>
<p>
<span class="page__point">2</span>
Adding position: relative doesn't change the display computed value. All values are saved.
</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box position-relative">
<span class="demo-box__text">I'm the item with display: block</span>
</div>
</div>
</div>
<span class="page__demo-caption">the block value is saved</span>
</div>
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box display-flex position-relative">
<span class="demo-box__text">I'm the item with display: flex</span>
</div>
</div>
</div>
<span class="page__demo-caption">the flex value is saved</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box display-grid position-relative">
<span class="demo-box__text">I'm the item with display: grid</span>
</div>
</div>
</div>
<span class="page__demo-caption">the grid value is saved</span>
</div>
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box display-table position-relative">
<span class="demo-box__text">I'm the item with display: table</span>
</div>
</div>
</div>
<span class="page__demo-caption">the table value is saved</span>
</div>
</div>
<p>
<span class="page__point">3</span>
The default working principle of the width and height properties is saved.
</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box">
<span class="demo-box__text">I'm the item with display: block</span>
</div>
</div>
</div>
<span class="page__demo-caption">the width and height properties before adding position: relative</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box position-relative">
<span class="demo-box__text">I'm the item with display: block</span>
</div>
</div>
</div>
<span class="page__demo-caption">the width and height properties after adding position: relative</span>
</div>
</div>
<p>
The element with display: table differs from another values. The width property doesn't fill up all free space. Adding position: relative doesn't affect it.
</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box display-table">
<span class="demo-box__text">I'm the item with display: table</span>
</div>
</div>
</div>
<span class="page__demo-caption">the width and height properties before adding position: relative</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box display-table position-relative">
<span class="demo-box__text">I'm the item with display: table</span>
</div>
</div>
</div>
<span class="page__demo-caption">the width and height properties after adding position: relative</span>
</div>
</div>
<p>
<span class="page__point">4</span>
Since the width and height properties can be applied to elements with block values we don't get some changes when we add position: relative to them.
</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box demo-box_with-sizes">
<span class="demo-box__text">I'm the item with display: block</span>
</div>
</div>
</div>
<span class="page__demo-caption">width: 148px and height: 148px are applied to the item before adding position: relative</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box demo-box_with-sizes position-relative">
<span class="demo-box__text">I'm the item with display: block</span>
</div>
</div>
</div>
<span class="page__demo-caption">width: 148px and height: 148px are applied to the item after adding position: relative</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box demo-box_with-sizes display-flex">
<span class="demo-box__text">I'm the item with display: flex</span>
</div>
</div>
</div>
<span class="page__demo-caption">width: 148px and height: 148px are applied to the item before adding position: relative</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box demo-box_with-sizes display-flex position-relative">
<span class="demo-box__text">I'm the item with display: flex</span>
</div>
</div>
</div>
<span class="page__demo-caption">width: 148px and height: 148px are applied to the item after adding position: relative</span>
</div>
</div>
<p>
<span class="page__point">5</span>
The padding and border properties work without changes for elements after adding position: relative.
</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box is-padding">
<span class="demo-box__text">I'm the item with display: block</span>
</div>
</div>
</div>
<span class="page__demo-caption">paddings before adding position: relative</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box is-padding position-relative">
<span class="demo-box__text">I'm the item with display: block</span>
</div>
</div>
</div>
<span class="page__demo-caption">paddings after adding position: relative</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box is-padding display-grid">
<span class="demo-box__text">I'm the item with display: grid</span>
</div>
</div>
</div>
<span class="page__demo-caption">paddings before adding position: relative</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box is-padding display-grid position-relative">
<span class="demo-box__text">I'm the item with display: grid</span>
</div>
</div>
</div>
<span class="page__demo-caption">paddings after adding position: relative</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box is-border">
<span class="demo-box__text">I'm the item with display: block</span>
</div>
</div>
</div>
<span class="page__demo-caption">borders before adding position: relative</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box is-border position-relative">
<span class="demo-box__text">I'm the item with display: block</span>
</div>
</div>
</div>
<span class="page__demo-caption">borders after adding position: relative</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box is-border display-grid">
<span class="demo-box__text">I'm the item with display: grid</span>
</div>
</div>
</div>
<span class="page__demo-caption">borders before adding position: relative</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box is-border display-grid position-relative">
<span class="demo-box__text">I'm the item with display: grid</span>
</div>
</div>
</div>
<span class="page__demo-caption">borders after adding position: relative</span>
</div>
</div>
<p>
Margin Collapsing of the elements with block values works too. Vertical margins extend beyond the parent. Margins between the elements collapse.
</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box is-margin">
<span class="demo-box__text">I'm the item with display: block #1</span>
</div>
<div class="demo-box is-margin">
<span class="demo-box__text">I'm the item with display: block #2</span>
</div>
</div>
</div>
<span class="page__demo-caption">margins before adding position: relative</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box is-margin position-relative">
<span class="demo-box__text">I'm the item with display: block #1</span>
</div>
<div class="demo-box is-margin position-relative">
<span class="demo-box__text">I'm the item with display: block #2</span>
</div>
</div>
</div>
<span class="page__demo-caption">margins after adding position: relative</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box is-margin display-flex">
<span class="demo-box__text">I'm the item with display: flex #1</span>
</div>
<div class="demo-box is-margin display-flex">
<span class="demo-box__text">I'm the item with display: flex #2</span>
</div>
</div>
</div>
<span class="page__demo-caption">margins before adding position: relative</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box is-margin display-flex position-relative">
<span class="demo-box__text">I'm the item with display: flex #1</span>
</div>
<div class="demo-box is-margin display-flex position-relative">
<span class="demo-box__text">I'm the item with display: flex #2</span>
</div>
</div>
</div>
<span class="page__demo-caption">margins after adding position: relative</span>
</div>
</div>
<p>
<span class="page__point">6</span>
When adding position: relative elements with block values are positioned one below the other.
</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box">
<span class="demo-box__text">I'm the item with display: block #1</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the item with display: block #2</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the item with display: block #3</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the item with display: block #4</span>
</div>
</div>
</div>
<span class="page__demo-caption">the items before adding position: relative</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box position-relative">
<span class="demo-box__text">I'm the item with display: block #1</span>
</div>
<div class="demo-box position-relative">
<span class="demo-box__text">I'm the item with display: block #2</span>
</div>
<div class="demo-box position-relative">
<span class="demo-box__text">I'm the item with display: block #3</span>
</div>
<div class="demo-box position-relative">
<span class="demo-box__text">I'm the item with display: block #4</span>
</div>
</div>
</div>
<span class="page__demo-caption">the items after adding position: relative</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box display-grid">
<span class="demo-box__text">I'm the item with display: grid #1</span>
</div>
<div class="demo-box display-grid">
<span class="demo-box__text">I'm the item with display: grid #2</span>
</div>
<div class="demo-box display-grid">
<span class="demo-box__text">I'm the item with display: grid #3</span>
</div>
<div class="demo-box display-grid">
<span class="demo-box__text">I'm the item with display: grid #4</span>
</div>
</div>
</div>
<span class="page__demo-caption">the items before adding position: relative</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box display-grid position-relative">
<span class="demo-box__text">I'm the item with display: grid #1</span>
</div>
<div class="demo-box display-grid position-relative">
<span class="demo-box__text">I'm the item with display: grid #2</span>
</div>
<div class="demo-box display-grid position-relative">
<span class="demo-box__text">I'm the item with display: grid #3</span>
</div>
<div class="demo-box display-grid position-relative">
<span class="demo-box__text">I'm the item with display: grid #4</span>
</div>
</div>
</div>
<span class="page__demo-caption">the items after adding position: relative</span>
</div>
</div>
<p>
Elements with position: relative can't overlap nearby elements without position: relative that are before or after them.
</p>
<p class="ha-screen-reader">There are 4 elements, the first two elements don't have position relative and the 3 and 4 have. All elements are displayed below each other in a column without overlapping.</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: block #1</span>
</div>
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: block #2</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the item with display: block #3</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the item with display: block #4</span>
</div>
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: block #5</span>
</div>
</div>
</div>
<span class="page__demo-caption">the items before adding position: relative to items #3 and #4</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: block #1</span>
</div>
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: block #2</span>
</div>
<div class="demo-box position-relative">
<span class="demo-box__text">I'm the item with display: block #3</span>
</div>
<div class="demo-box position-relative">
<span class="demo-box__text">I'm the item with display: block #4</span>
</div>
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: block #5</span>
</div>
</div>
</div>
<span class="page__demo-caption">the items after adding position: relative to items #3 and #4</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box demo-box_accent display-flex">
<span class="demo-box__text">I'm just the item with display: flex #1</span>
</div>
<div class="demo-box demo-box_accent display-flex">
<span class="demo-box__text">I'm just the item with display: flex #2</span>
</div>
<div class="demo-box display-flex">
<span class="demo-box__text">I'm the item with display: flex #3</span>
</div>
<div class="demo-box display-flex">
<span class="demo-box__text">I'm the item with display: flex #4</span>
</div>
<div class="demo-box demo-box_accent display-flex">
<span class="demo-box__text">I'm just the item with display: flex #5</span>
</div>
</div>
</div>
<span class="page__demo-caption">the items before adding position: relative to items #3 and #4</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box demo-box_accent display-flex">
<span class="demo-box__text">I'm just the item with display: flex #1</span>
</div>
<div class="demo-box demo-box_accent display-flex">
<span class="demo-box__text">I'm just the item with display: flex #2</span>
</div>
<div class="demo-box display-flex position-relative">
<span class="demo-box__text">I'm the item with display: flex #3</span>
</div>
<div class="demo-box display-flex position-relative">
<span class="demo-box__text">I'm the item with display: flex #4</span>
</div>
<div class="demo-box demo-box_accent display-flex">
<span class="demo-box__text">I'm just the item with display: flex #5</span>
</div>
</div>
</div>
<span class="page__demo-caption">the items after adding position: relative to items #3 and #4</span>
</div>
</div>
<h3>The inline values</h3>
<div class="page__remark">
<p>
Note! I mean the inline values are the inline, inline-block, inline-flex and inline-grid value
</p>
</div>
<p>
<span class="page__point">7</span>
As with block values when adding position: relative to all childs the parent height is computed depending on the childs height.
</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box">
<span class="demo-box__text">I'm the item with display: inline</span>
</span>
</div>
</div>
<span class="page__demo-caption">the height property of the parent before adding position: relative to childs</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box position-relative">
<span class="demo-box__text">I'm the item with display: inline</span>
</span>
</div>
</div>
<span class="page__demo-caption">the height property of the parent after adding position: relative to childs</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box display-inline-block">
<span class="demo-box__text">I'm the item with display: inline-block</span>
</span>
</div>
</div>
<span class="page__demo-caption">the height property of the parent before adding position: relative to childs</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box display-inline-block position-relative">
<span class="demo-box__text">I'm the item with display: inline-block</span>
</span>
</div>
</div>
<span class="page__demo-caption">the height property of the parent after adding position: relative to childs</span>
</div>
</div>
<p>
That behavior is saved if to add position: relative to a part of the childs.
</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box demo-box_accent">
<span class="demo-box__text">I'm the item with display: inline #1</span>
</span>
<span class="demo-box demo-box_accent">
<span class="demo-box__text">I'm the item with display: inline #2</span>
</span>
<span class="demo-box demo-box_accent">
<span class="demo-box__text">I'm the item with display: inline #3</span>
</span>
<span class="demo-box demo-box_accent">
<span class="demo-box__text">I'm the item with display: inline #4</span>
</span>
<span class="demo-box">
<span class="demo-box__text">I'm the item with display: inline #5</span>
</span>
</div>
</div>
<span class="page__demo-caption">the height property of the parent before adding position: relative to childs</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box demo-box_accent">
<span class="demo-box__text">I'm the item with display: inline #1</span>
</span>
<span class="demo-box demo-box_accent">
<span class="demo-box__text">I'm the item with display: inline #2</span>
</span>
<span class="demo-box demo-box_accent">
<span class="demo-box__text">I'm the item with display: inline #3</span>
</span>
<span class="demo-box demo-box_accent">
<span class="demo-box__text">I'm the item with display: inline #4</span>
</span>
<span class="demo-box position-relative">
<span class="demo-box__text">I'm the item with display: inline #5</span>
</span>
</div>
</div>
<span class="page__demo-caption">the height property of the parent after adding position: relative to childs</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box demo-box_accent display-inline-block">
<span class="demo-box__text">I'm the item with display: inline-block #1</span>
</span>
<span class="demo-box demo-box_accent display-inline-block">
<span class="demo-box__text">I'm the item with display: inline-block #2</span>
</span>
<span class="demo-box demo-box_accent display-inline-block">
<span class="demo-box__text">I'm the item with display: inline-block #3</span>
</span>
<span class="demo-box demo-box_accent display-inline-block">
<span class="demo-box__text">I'm the item with display: inline-block #4</span>
</span>
<span class="demo-box display-inline-block">
<span class="demo-box__text">I'm the item with display: inline-block #5</span>
</span>
</div>
</div>
<span class="page__demo-caption">the height property of the parent before adding position: relative to childs</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box demo-box_accent display-inline-block">
<span class="demo-box__text">I'm the item with display: inline-block #1</span>
</span>
<span class="demo-box demo-box_accent display-inline-block">
<span class="demo-box__text">I'm the item with display: inline-block #2</span>
</span>
<span class="demo-box demo-box_accent display-inline-block">
<span class="demo-box__text">I'm the item with display: inline-block #3</span>
</span>
<span class="demo-box demo-box_accent display-inline-block">
<span class="demo-box__text">I'm the item with display: inline-block #4</span>
</span>
<span class="demo-box position-relative display-inline-block">
<span class="demo-box__text">I'm the item with display: inline-block #5</span>
</span>
</div>
</div>
<span class="page__demo-caption">the height property of the parent after adding position: relative to childs</span>
</div>
</div>
<p>
<span class="page__point">8</span>
All inline values won't be changed on block values like when adding position: absolute or fixed.
</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box position-relative">
<span class="demo-box__text">I'm the item with display: inline</span>
</span>
</div>
</div>
<span class="page__demo-caption">the inline value is saved</span>
</div>
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box display-inline-block position-relative">
<span class="demo-box__text">I'm the item with display: inline-block</span>
</div>
</div>
</div>
<span class="page__demo-caption">the inline-block value is saved</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box display-inline-flex position-relative">
<span class="demo-box__text">I'm the item with display: inline-flex</span>
</span>
</div>
</div>
<span class="page__demo-caption">the inline-flex value is saved</span>
</div>
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box display-inline-grid position-relative">
<span class="demo-box__text">I'm the item with display: inline-grid</span>
</div>
</div>
</div>
<span class="page__demo-caption">the inline-grid value is saved</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box display-inline-table position-relative">
<span class="demo-box__text">I'm the item with display: inline-table</span>
</span>
</div>
</div>
<span class="page__demo-caption">the inline-table value is saved</span>
</div>
</div>
<p>
<span class="page__point">9</span>
By default, the width and height properties of elements with display: inline are computed depending on content. That behavior is saved without changing the computed value.
</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box">
<span class="demo-box__text">I'm the item with display: inline</span>
</span>
</div>
</div>
<span class="page__demo-caption">the width and height properties are defined in the auto value before adding position: relative</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box position-relative">
<span class="demo-box__text">I'm the item with display: inline</span>
</span>
</div>
</div>
<span class="page__demo-caption">the width and height properties are defined in the auto value after adding position: relative</span>
</div>
</div>
<p>
<span class="page__point">10</span>
As well as these properties can't be applied to elements with display: inline. Adding position: relative doesn't change that.
</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box demo-box_with-sizes">
<span class="demo-box__text">I'm the item with display: inline</span>
</span>
</div>
</div>
<span class="page__demo-caption">width: 148px and height: 148px are applied to the item before adding position: relative</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box demo-box_with-sizes position-relative">
<span class="demo-box__text">I'm the item with display: inline</span>
</span>
</div>
</div>
<span class="page__demo-caption">width: 148px and height: 148px are applied to the item after adding position: relative</span>
</div>
</div>
<p>
Also these properties are applied to elements with all other inline-* values. So we won't get any changes after adding position: relative.
</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box demo-box_with-sizes display-inline-flex">
<span class="demo-box__text">I'm the item with display: inline-flex</span>
</span>
</div>
</div>
<span class="page__demo-caption">width: 148px and height: 148px are applied to the item before adding position: relative</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box demo-box_with-sizes display-inline-flex position-relative">
<span class="demo-box__text">I'm the item with display: inline-flex</span>
</span>
</div>
</div>
<span class="page__demo-caption">width: 148px and height: 148px are applied to the item after adding position: relative</span>
</div>
</div>
<p>
<span class="page__point">11</span>
The vertical paddings, borders and margins of elements with display: inline continue to extend beyond the parent after adding position: relative.
</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box is-padding">
<span class="demo-box__text">I'm the item with display: inline</span>
</span>
</div>
</div>
<span class="page__demo-caption">paddings before adding position: relative</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box is-padding position-relative">
<span class="demo-box__text">I'm the item with display: inline</span>
</span>
</div>
</div>
<span class="page__demo-caption">paddings after adding position: relative</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box is-border">
<span class="demo-box__text">I'm the item with display: inline</span>
</span>
</div>
</div>
<span class="page__demo-caption">borders before adding position: relative</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box is-border position-relative">
<span class="demo-box__text">I'm the item with display: inline</span>
</span>
</div>
</div>
<span class="page__demo-caption">borders after adding position: relative</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box is-margin">
<span class="demo-box__text">I'm the item with display: inline</span>
</span>
</div>
</div>
<span class="page__demo-caption">margins before adding position: relative</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box is-margin position-relative">
<span class="demo-box__text">I'm the item with display: inline</span>
</span>
</div>
</div>
<span class="page__demo-caption">margins after adding position: relative</span>
</div>
</div>
<p>
The same properties for the elements with display: inline-* don't extend beyond the parent. So there aren't changes after adding position: relative.
</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box is-padding display-inline-grid">
<span class="demo-box__text">I'm the item with display: inline-grid</span>
</span>
</div>
</div>
<span class="page__demo-caption">paddings before adding position: relative</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box is-padding display-inline-grid position-relative">
<span class="demo-box__text">I'm the item with display: inline-grid</span>
</span>
</div>
</div>
<span class="page__demo-caption">paddings after adding position: relative</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box is-border display-inline-grid">
<span class="demo-box__text">I'm the item with display: inline-grid</span>
</span>
</div>
</div>
<span class="page__demo-caption">borders before adding position: relative</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box is-border display-inline-grid position-relative">
<span class="demo-box__text">I'm the item with display: inline-grid</span>
</span>
</div>
</div>
<span class="page__demo-caption">borders after adding position: relative</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box is-margin display-inline-grid">
<span class="demo-box__text">I'm the item with display: inline-grid</span>
</span>
</div>
</div>
<span class="page__demo-caption">margins before adding position: relative</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box is-margin display-inline-flex position-relative">
<span class="demo-box__text">I'm the item with display: inline-grid</span>
</span>
</div>
</div>
<span class="page__demo-caption">margins after adding position: relative</span>
</div>
</div>
<p>
<span class="page__point">12</span>
Elements with inline values for the display property are positioned in a row by default. When adding position: relative that behavior is saved.
</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box">
<span class="demo-box__text">I'm the item with display: inline #1</span>
</span>
<span class="demo-box">
<span class="demo-box__text">I'm the item with display: inline #2</span>
</span>
<span class="demo-box">
<span class="demo-box__text">I'm the item with display: inline #3</span>
</span>
<span class="demo-box">
<span class="demo-box__text">I'm the item with display: inline #4</span>
</span>
</div>
</div>
<span class="page__demo-caption">the items before adding position: relative</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box position-relative">
<span class="demo-box__text">I'm the item with display: inline #1</span>
</span>
<span class="demo-box position-relative">
<span class="demo-box__text">I'm the item with display: inline #2</span>
</span>
<span class="demo-box position-relative">
<span class="demo-box__text">I'm the item with display: inline #3</span>
</span>
<span class="demo-box position-relative">
<span class="demo-box__text">I'm the item with display: inline #4</span>
</span>
</div>
</div>
<span class="page__demo-caption">the items after adding position: relative</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box display-inline-flex">
<span class="demo-box__text">I'm the item with display: inline-flex #1</span>
</span>
<span class="demo-box display-inline-flex">
<span class="demo-box__text">I'm the item with display: inline-flex #2</span>
</span>
<span class="demo-box display-inline-flex">
<span class="demo-box__text">I'm the item with display: inline-flex #3</span>
</span>
<span class="demo-box display-inline-flex">
<span class="demo-box__text">I'm the item with display: inline-flex #4</span>
</span>
</div>
</div>
<span class="page__demo-caption">the items before adding position: relative</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box display-inline-flex position-relative">
<span class="demo-box__text">I'm the item with display: inline-flex #1</span>
</span>
<span class="demo-box display-inline-flex position-relative">
<span class="demo-box__text">I'm the item with display: inline-flex #2</span>
</span>
<span class="demo-box display-inline-flex position-relative">
<span class="demo-box__text">I'm the item with display: inline-flex #3</span>
</span>
<span class="demo-box display-inline-flex position-relative">
<span class="demo-box__text">I'm the item with display: inline-flex #4</span>
</span>
</div>
</div>
<span class="page__demo-caption">the items after adding position: relative</span>
</div>
</div>
<p>
They also can't overlap the elements before and after them.
</p>
<p class="ha-screen-reader">There are 4 elements, the first two elements don't have position relative and the 3 and 4 have. All elements are displayed each other in a row without overlapping.</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: inline #1</span>
</span>
<span class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: inline #2</span>
</span>
<span class="demo-box">
<span class="demo-box__text">I'm the item with display: inline #3</span>
</span>
<span class="demo-box">
<span class="demo-box__text">I'm the item with display: inline #4</span>
</span>
<span class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: inline #5</span>
</span>
</div>
</div>
<span class="page__demo-caption">the items before adding position: relative to items #3 and #4</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: inline #1</span>
</span>
<span class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: inline #2</span>
</span>
<span class="demo-box position-relative">
<span class="demo-box__text">I'm the item with display: inline #3</span>
</span>
<span class="demo-box position-relative">
<span class="demo-box__text">I'm the item with display: inline #4</span>
</span>
<span class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: inline #5</span>
</span>
</div>
</div>
<span class="page__demo-caption">the items after adding position: relative to items #3 and #4</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box demo-box_accent display-inline-grid">
<span class="demo-box__text">I'm just the item with display: inline-grid #1</span>
</span>
<span class="demo-box demo-box_accent display-inline-grid">
<span class="demo-box__text">I'm just the item with display: inline-grid #2</span>
</span>
<span class="demo-box display-inline-grid">
<span class="demo-box__text">I'm the item with display: inline-grid #3</span>
</span>
<span class="demo-box display-inline-grid">
<span class="demo-box__text">I'm the item with display: inline-grid #4</span>
</span>
<span class="demo-box demo-box_accent display-inline-grid">
<span class="demo-box__text">I'm just the item with display: inline-grid #5</span>
</span>
</div>
</div>
<span class="page__demo-caption">the items before adding position: relative to items #3 and #4</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box demo-box_accent display-inline-grid">
<span class="demo-box__text">I'm just the item with display: inline-grid #1</span>
</span>
<span class="demo-box display-inline-grid demo-box_accent">
<span class="demo-box__text">I'm just the item with display: inline-grid #2</span>
</span>
<span class="demo-box display-inline-grid position-relative">
<span class="demo-box__text">I'm the item with display: inline-grid #3</span>
</span>
<span class="demo-box display-inline-grid position-relative">
<span class="demo-box__text">I'm the item with display: inline-grid #4</span>
</span>
<span class="demo-box demo-box_accent display-inline-grid">
<span class="demo-box__text">I'm just the item with display: inline-grid #5</span>
</span>
</div>
</div>
<span class="page__demo-caption">the items after adding position: relative to items #3 and #4</span>
</div>
</div>
<h3>Flex items</h3>
<p>
<span class="page__point">13</span>
Flex items keep to stretch by the additional axis when adding position: relative to them.
</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-row">
<div class="demo-box">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">the flex item before adding position: relative when the parent has flex-direction: row</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-row">
<div class="demo-box position-relative">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">the flex item after adding position: relative when the parent has flex-direction: row</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-column">
<div class="demo-box">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">the flex item before adding position: relative when the parent has flex-direction: column</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-column">
<div class="demo-box position-relative">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">the flex item after adding position: relative when the parent has flex-direction: column</span>
</div>
</div>
<p>
<span class="page__point">14</span>
After adding position: relative flex items are positioned by main axis.
</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-row">
<div class="demo-box">
<span class="demo-box__text">I'm the flex item #1</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the flex item #2</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the flex item #3</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the flex item #4</span>
</div>
</div>
</div>
<span class="page__demo-caption">the flex items are positioned in a row before adding position: relative when the parent has flex-direction: row</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-row">
<div class="demo-box position-relative">
<span class="demo-box__text">I'm the flex item #1</span>
</div>
<div class="demo-box position-relative">
<span class="demo-box__text">I'm the flex item #2</span>
</div>
<div class="demo-box position-relative">
<span class="demo-box__text">I'm the flex item #3</span>
</div>
<div class="demo-box position-relative">
<span class="demo-box__text">I'm the flex item #4</span>
</div>
</div>
</div>
<span class="page__demo-caption">the flex items are overlapped after adding position: relative when the parent has flex-direction: row</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-column">
<div class="demo-box">
<span class="demo-box__text">I'm the flex item #1</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the flex item #2</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the flex item #3</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the flex item #4</span>
</div>
</div>
</div>
<span class="page__demo-caption">the flex items are positioned in a column before adding position: relative when the parent has flex-direction: column</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-column">
<div class="demo-box position-relative">
<span class="demo-box__text">I'm the flex item #1</span>
</div>
<div class="demo-box position-relative">
<span class="demo-box__text">I'm the flex item #2</span>
</div>
<div class="demo-box position-relative">
<span class="demo-box__text">I'm the flex item #3</span>
</div>
<div class="demo-box position-relative">
<span class="demo-box__text">I'm the flex item #4</span>
</div>
</div>
</div>
<span class="page__demo-caption">the flex items are overlapped after adding position: relative when the parent has flex-direction: column</span>
</div>
</div>
<p>
Elements with position: relative can't overlap any nearby elements that might be before or after them.
</p>
<p class="ha-screen-reader">There are 4 elements, the 1 and 4 elements don't have position relative and the 2 and 3 have. All elements are displayed each other in a row without overlapping.</p>
<p class="ha-screen-reader">There are 4 elements, the 1 and 4 elements don't have position relative and the 2 and 3 have. All elements are displayed below each other in a column without overlapping.</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-row">
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the flex item #1</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the flex item #2</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the flex item #3</span>
</div>
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the flex item #4</span>
</div>
</div>
</div>
<span class="page__demo-caption">the flex items before adding position: relative flex items #2 and #3 when the parent has flex-direction: row</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-row">
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the flex item #1</span>
</div>
<div class="demo-box position-relative">
<span class="demo-box__text">I'm the flex item #2</span>
</div>
<div class="demo-box position-relative">
<span class="demo-box__text">I'm the flex item #3</span>
</div>
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the flex item #4</span>
</div>
</div>
</div>
<span class="page__demo-caption">the flex items after adding position: relative flex items #2 and #3 when the parent has flex-direction: row</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-column">
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the flex item #1</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the flex item #2</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the flex item #3</span>
</div>
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the flex item #4</span>
</div>
</div>
</div>
<span class="page__demo-caption">the flex items before adding position: relative flex items #2 and #3 when the parent has flex-direction: column</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-column">
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the flex item #1</span>
</div>
<div class="demo-box position-relative">
<span class="demo-box__text">I'm the flex item #2</span>
</div>
<div class="demo-box position-relative">
<span class="demo-box__text">I'm the flex item #3</span>
</div>
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the flex item #4</span>
</div>
</div>
</div>
<span class="page__demo-caption">the flex items after adding position: relative flex items #2 and #3 when the parent has flex-direction: column</span>
</div>
</div>
<p>
<span class="page__point">15</span>
If we defined the width and height properties to flex items we won't get any changes after adding position: relative to them.
</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-row">
<div class="demo-box demo-box_with-sizes">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">width: 148px and height: 148px are applied to the flex item before adding position: relative</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-row">
<div class="demo-box demo-box_with-sizes position-relative">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">width: 148px and height: 148px are applied to the flex item after adding position: relative</span>
</div>
</div>
<p>
<span class="page__point">16</span>
The padding, border and margin properties continue working without changes when adding position: relative to flex items.
</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-row">
<div class="demo-box is-padding">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">paddings before adding position: relative when the parent has flex-direction: row</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-row">
<div class="demo-box is-padding position-relative">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">paddings after adding position: relative when the parent has flex-direction: row</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-column">
<div class="demo-box is-padding">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">paddings before adding position: relative when the parent has flex-direction: column</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-column">
<div class="demo-box is-padding position-relative">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">paddings after adding position: relative when the parent has flex-direction: column</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-row">
<div class="demo-box is-border">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">borders before adding position: relative when the parent has flex-direction: row</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-row">
<div class="demo-box is-border position-relative">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">borders after adding position: relative when the parent has flex-direction: row</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-column">
<div class="demo-box is-border">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">borders before adding position: relative when the parent has flex-direction: column</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-column">
<div class="demo-box is-border position-relative">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">borders after adding position: relative when the parent has flex-direction: column</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-row">
<div class="demo-box is-margin">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">margins before adding position: relative when the parent has flex-direction: row</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-row">
<div class="demo-box is-margin position-relative">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">margins after adding position: relative when the parent has flex-direction: row</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-column">
<div class="demo-box is-margin">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">margins before adding position: relative when the parent has flex-direction: column</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-column">
<div class="demo-box is-margin position-relative">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">margins after adding position: relative when the parent has flex-direction: column</span>
</div>
</div>
</section>
<section id="static-tab" aria-labelledby="static" role="tabpanel" tabindex="0" class="page__content" hidden>
<h3>The block values</h3>
<div class="page__remark">
<p>
Note! I mean the block values are the block, flex and grid value
</p>
</div>
<p>
<span class="page__point">1</span>
When we add position: static to all childs we don't get any changes. The parent height still is computed depending on the childs height.
</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box">
<span class="demo-box__text">I'm the item with display: block</span>
</div>
</div>
</div>
<span class="page__demo-caption">the height property of the parent before adding position: static to childs</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box position-static">
<span class="demo-box__text">I'm the item with display: block</span>
</div>
</div>
</div>
<span class="page__demo-caption">the height property of the parent after adding position: static to childs</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box display-flex">
<span class="demo-box__text">I'm the item with display: flex</span>
</div>
</div>
</div>
<span class="page__demo-caption">the height property of the parent before adding position: static to childs</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box display-flex position-static">
<span class="demo-box__text">I'm the item with display: flex</span>
</div>
</div>
</div>
<span class="page__demo-caption">the height property of the parent after adding position: static to childs</span>
</div>
</div>
<p>
That works if we add position: static to a part of the childs.
</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: block #1</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the item with display: block #2</span>
</div>
</div>
</div>
<span class="page__demo-caption">the height property of the parent before adding position: static to item #2</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="page__demo-viewport">
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: block #1</span>
</div>
<div class="demo-box position-static">
<span class="demo-box__text">I'm the item with display: block #2</span>
</div>
</div>
</div>
</div>
<span class="page__demo-caption">the height property of the parent after adding position: static to item #2</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box demo-box_accent display-grid">
<span class="demo-box__text">I'm the item with display: grid #1</span>
</div>
<div class="demo-box display-grid">
<span class="demo-box__text">I'm the item with display: grid #2</span>
</div>
</div>
</div>
<span class="page__demo-caption">the height property of the parent before adding position: static to childs</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box demo-box_accent display-grid">
<span class="demo-box__text">I'm the item with display: grid #1</span>
</div>
<div class="demo-box display-grid position-static">
<span class="demo-box__text">I'm the item with display: grid #2</span>
</div>
</div>
</div>
<span class="page__demo-caption">the height property of the parent after adding position: static to childs</span>
</div>
</div>
<p>
<span class="page__point">2</span>
Adding position: static doesn't change the display computed value. All values are saved.
</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box position-static">
<span class="demo-box__text">I'm the item with display: block</span>
</div>
</div>
</div>
<span class="page__demo-caption">the block value is saved</span>
</div>
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box display-flex position-static">
<span class="demo-box__text">I'm the item with display: flex</span>
</div>
</div>
</div>
<span class="page__demo-caption">the flex value is saved</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box display-grid position-static">
<span class="demo-box__text">I'm the item with display: grid</span>
</div>
</div>
</div>
<span class="page__demo-caption">the grid value is saved</span>
</div>
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box display-table position-static">
<span class="demo-box__text">I'm the item with display: table</span>
</div>
</div>
</div>
<span class="page__demo-caption">the table value is saved</span>
</div>
</div>
<p>
<span class="page__point">3</span>
The default working principle of the width and height properties is saved.
</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box">
<span class="demo-box__text">I'm the item with display: block</span>
</div>
</div>
</div>
<span class="page__demo-caption">the width and height properties before adding position: static</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box position-static">
<span class="demo-box__text">I'm the item with display: block</span>
</div>
</div>
</div>
<span class="page__demo-caption">the width and height properties after adding position: static</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box display-flex">
<span class="demo-box__text">I'm the item with display: flex</span>
</div>
</div>
</div>
<span class="page__demo-caption">the width and height properties before adding position: static</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box display-flex position-static">
<span class="demo-box__text">I'm the item with display: flex</span>
</div>
</div>
</div>
<span class="page__demo-caption">the width and height properties after adding position: static</span>
</div>
</div>
<p>
The element with display: table differs from another values. The width property doesn't fill up all free space. Adding position: static doesn't affect it.
</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box display-table">
<span class="demo-box__text">I'm the item with display: table</span>
</div>
</div>
</div>
<span class="page__demo-caption">the width and height properties before adding position: static</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box display-table position-static">
<span class="demo-box__text">I'm the item with display: table</span>
</div>
</div>
</div>
<span class="page__demo-caption">the width and height properties after adding position: static</span>
</div>
</div>
<p>
<span class="page__point">4</span>
Since the width and height properties can be applied to elements with block values we don't get some changes when we add position: static to them.
</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box demo-box_with-sizes">
<span class="demo-box__text">I'm the item with display: block</span>
</div>
</div>
</div>
<span class="page__demo-caption">width: 148px and height: 148px are applied to the item before adding position: static</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box demo-box_with-sizes position-static">
<span class="demo-box__text">I'm the item with display: block</span>
</div>
</div>
</div>
<span class="page__demo-caption">width: 148px and height: 148px are applied to the item after adding position: static</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box demo-box_with-sizes display-flex">
<span class="demo-box__text">I'm the item with display: flex</span>
</div>
</div>
</div>
<span class="page__demo-caption">width: 148px and height: 148px are applied to the item before adding position: static</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box demo-box_with-sizes display-flex position-static">
<span class="demo-box__text">I'm the item with display: flex</span>
</div>
</div>
</div>
<span class="page__demo-caption">width: 148px and height: 148px are applied to the item after adding position: static</span>
</div>
</div>
<p>
<span class="page__point">5</span>
The padding and border properties work without changes for elements after adding position: static.
</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box is-padding">
<span class="demo-box__text">I'm the item with display: block</span>
</div>
</div>
</div>
<span class="page__demo-caption">paddings before adding position: static</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box is-padding position-static">
<span class="demo-box__text">I'm the item with display: block</span>
</div>
</div>
</div>
<span class="page__demo-caption">paddings after adding position: static</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box is-padding display-grid">
<span class="demo-box__text">I'm the item with display: grid</span>
</div>
</div>
</div>
<span class="page__demo-caption">paddings before adding position: static</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box is-padding display-grid position-static">
<span class="demo-box__text">I'm the item with display: grid</span>
</div>
</div>
</div>
<span class="page__demo-caption">paddings after adding position: static</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box is-border">
<span class="demo-box__text">I'm the item with display: block</span>
</div>
</div>
</div>
<span class="page__demo-caption">borders before adding position: static</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box is-border position-static">
<span class="demo-box__text">I'm the item with display: block</span>
</div>
</div>
</div>
<span class="page__demo-caption">borders after adding position: static</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box is-border display-grid">
<span class="demo-box__text">I'm the item with display: grid</span>
</div>
</div>
</div>
<span class="page__demo-caption">borders before adding position: static</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box is-border display-grid position-static">
<span class="demo-box__text">I'm the item with display: grid</span>
</div>
</div>
</div>
<span class="page__demo-caption">borders after adding position: static</span>
</div>
</div>
<p>
Margin Collapsing of the elements with block values works too. Vertical margins extend beyond the parent. Margins between the elements collapse.
</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box is-margin">
<span class="demo-box__text">I'm the item with display: block #1</span>
</div>
<div class="demo-box is-margin">
<span class="demo-box__text">I'm the item with display: block #2</span>
</div>
</div>
</div>
<span class="page__demo-caption">margins before adding position: static</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box is-margin position-static">
<span class="demo-box__text">I'm the item with display: block #1</span>
</div>
<div class="demo-box is-margin position-static">
<span class="demo-box__text">I'm the item with display: block #2</span>
</div>
</div>
</div>
<span class="page__demo-caption">margins after adding position: static</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box is-margin display-flex">
<span class="demo-box__text">I'm the item with display: flex #1</span>
</div>
<div class="demo-box is-margin display-flex">
<span class="demo-box__text">I'm the item with display: flex #2</span>
</div>
</div>
</div>
<span class="page__demo-caption">margins before adding position: static</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box is-margin display-flex position-static">
<span class="demo-box__text">I'm the item with display: flex #1</span>
</div>
<div class="demo-box is-margin display-flex position-static">
<span class="demo-box__text">I'm the item with display: flex #2</span>
</div>
</div>
</div>
<span class="page__demo-caption">margins after adding position: static</span>
</div>
</div>
<p>
<span class="page__point">6</span>
When adding position: static elements with block values are positioned one below the other.
</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box">
<span class="demo-box__text">I'm the item with display: block #1</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the item with display: block #2</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the item with display: block #3</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the item with display: block #4</span>
</div>
</div>
</div>
<span class="page__demo-caption">the items before adding position: static</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box position-static">
<span class="demo-box__text">I'm the item with display: block #1</span>
</div>
<div class="demo-box position-static">
<span class="demo-box__text">I'm the item with display: block #2</span>
</div>
<div class="demo-box position-static">
<span class="demo-box__text">I'm the item with display: block #3</span>
</div>
<div class="demo-box position-static">
<span class="demo-box__text">I'm the item with display: block #4</span>
</div>
</div>
</div>
<span class="page__demo-caption">the items after adding position: static</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box display-grid">
<span class="demo-box__text">I'm the item with display: grid #1</span>
</div>
<div class="demo-box display-grid">
<span class="demo-box__text">I'm the item with display: grid #2</span>
</div>
<div class="demo-box display-grid">
<span class="demo-box__text">I'm the item with display: grid #3</span>
</div>
<div class="demo-box display-grid">
<span class="demo-box__text">I'm the item with display: grid #4</span>
</div>
</div>
</div>
<span class="page__demo-caption">the items before adding position: static</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box display-grid position-static">
<span class="demo-box__text">I'm the item with display: grid #1</span>
</div>
<div class="demo-box display-grid position-static">
<span class="demo-box__text">I'm the item with display: grid #2</span>
</div>
<div class="demo-box display-grid position-static">
<span class="demo-box__text">I'm the item with display: grid #3</span>
</div>
<div class="demo-box display-grid position-static">
<span class="demo-box__text">I'm the item with display: grid #4</span>
</div>
</div>
</div>
<span class="page__demo-caption">the items after adding position: static</span>
</div>
</div>
<p>
Elements with position: static can't overlap nearby elements without position: static that are before or after them.
</p>
<p class="ha-screen-reader">There are 4 elements, the first two elements don't have position static and the 3 and 4 have. All elements are displayed below each other in a column without overlapping.</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: block #1</span>
</div>
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: block #2</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the item with display: block #3</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the item with display: block #4</span>
</div>
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: block #5</span>
</div>
</div>
</div>
<span class="page__demo-caption">the items before adding position: static to items #3 and #4</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: block #1</span>
</div>
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: block #2</span>
</div>
<div class="demo-box position-static">
<span class="demo-box__text">I'm the item with display: block #3</span>
</div>
<div class="demo-box position-static">
<span class="demo-box__text">I'm the item with display: block #4</span>
</div>
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: block #5</span>
</div>
</div>
</div>
<span class="page__demo-caption">the items after adding position: static to items #3 and #4</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box demo-box_accent display-flex">
<span class="demo-box__text">I'm just the item with display: flex #1</span>
</div>
<div class="demo-box demo-box_accent display-flex">
<span class="demo-box__text">I'm just the item with display: flex #2</span>
</div>
<div class="demo-box display-flex">
<span class="demo-box__text">I'm the item with display: flex #3</span>
</div>
<div class="demo-box display-flex">
<span class="demo-box__text">I'm the item with display: flex #4</span>
</div>
<div class="demo-box demo-box_accent display-flex">
<span class="demo-box__text">I'm just the item with display: flex #5</span>
</div>
</div>
</div>
<span class="page__demo-caption">the items before adding position: static to items #3 and #4</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box demo-box_accent display-flex">
<span class="demo-box__text">I'm just the item with display: flex #1</span>
</div>
<div class="demo-box demo-box_accent display-flex">
<span class="demo-box__text">I'm just the item with display: flex #2</span>
</div>
<div class="demo-box display-flex position-static">
<span class="demo-box__text">I'm the item with display: flex #3</span>
</div>
<div class="demo-box display-flex position-static">
<span class="demo-box__text">I'm the item with display: flex #4</span>
</div>
<div class="demo-box demo-box_accent display-flex">
<span class="demo-box__text">I'm just the item with display: flex #5</span>
</div>
</div>
</div>
<span class="page__demo-caption">the items after adding position: static to items #3 and #4</span>
</div>
</div>
<h3>The inline values</h3>
<div class="page__remark">
<p>
Note! I mean the inline values are the inline, inline-block, inline-flex and inline-grid value
</p>
</div>
<p>
<span class="page__point">7</span>
As with block values when adding position: static to all childs the parent height is computed depending on the childs height.
</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box">
<span class="demo-box__text">I'm the item with display: inline</span>
</span>
</div>
</div>
<span class="page__demo-caption">the height property of the parent before adding position: static to childs</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box position-static">
<span class="demo-box__text">I'm the item with display: inline</span>
</span>
</div>
</div>
<span class="page__demo-caption">the height property of the parent after adding position: static to childs</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box display-inline-block">
<span class="demo-box__text">I'm the item with display: inline-block</span>
</span>
</div>
</div>
<span class="page__demo-caption">the height property of the parent before adding position: static to childs</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box display-inline-block position-static">
<span class="demo-box__text">I'm the item with display: inline-block</span>
</span>
</div>
</div>
<span class="page__demo-caption">the height property of the parent after adding position: static to childs</span>
</div>
</div>
<p>
That behavior is saved if to add position: static to a part of the childs.
</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box demo-box_accent">
<span class="demo-box__text">I'm the item with display: inline #1</span>
</span>
<span class="demo-box demo-box_accent">
<span class="demo-box__text">I'm the item with display: inline #2</span>
</span>
<span class="demo-box demo-box_accent">
<span class="demo-box__text">I'm the item with display: inline #3</span>
</span>
<span class="demo-box demo-box_accent">
<span class="demo-box__text">I'm the item with display: inline #4</span>
</span>
<span class="demo-box">
<span class="demo-box__text">I'm the item with display: inline #5</span>
</span>
</div>
</div>
<span class="page__demo-caption">the height property of the parent before adding position: static to childs</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box demo-box_accent">
<span class="demo-box__text">I'm the item with display: inline #1</span>
</span>
<span class="demo-box demo-box_accent">
<span class="demo-box__text">I'm the item with display: inline #2</span>
</span>
<span class="demo-box demo-box_accent">
<span class="demo-box__text">I'm the item with display: inline #3</span>
</span>
<span class="demo-box demo-box_accent">
<span class="demo-box__text">I'm the item with display: inline #4</span>
</span>
<span class="demo-box position-static">
<span class="demo-box__text">I'm the item with display: inline #5</span>
</span>
</div>
</div>
<span class="page__demo-caption">the height property of the parent after adding position: static to childs</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box demo-box_accent display-inline-block">
<span class="demo-box__text">I'm the item with display: inline-block #1</span>
</span>
<span class="demo-box demo-box_accent display-inline-block">
<span class="demo-box__text">I'm the item with display: inline-block #2</span>
</span>
<span class="demo-box demo-box_accent display-inline-block">
<span class="demo-box__text">I'm the item with display: inline-block #3</span>
</span>
<span class="demo-box demo-box_accent display-inline-block">
<span class="demo-box__text">I'm the item with display: inline-block #4</span>
</span>
<span class="demo-box display-inline-block">
<span class="demo-box__text">I'm the item with display: inline-block #5</span>
</span>
</div>
</div>
<span class="page__demo-caption">the height property of the parent before adding position: static to childs</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box demo-box_accent display-inline-block">
<span class="demo-box__text">I'm the item with display: inline-block #1</span>
</span>
<span class="demo-box demo-box_accent display-inline-block">
<span class="demo-box__text">I'm the item with display: inline-block #2</span>
</span>
<span class="demo-box demo-box_accent display-inline-block">
<span class="demo-box__text">I'm the item with display: inline-block #3</span>
</span>
<span class="demo-box demo-box_accent display-inline-block">
<span class="demo-box__text">I'm the item with display: inline-block #4</span>
</span>
<span class="demo-box position-static display-inline-block">
<span class="demo-box__text">I'm the item with display: inline-block #5</span>
</span>
</div>
</div>
<span class="page__demo-caption">the height property of the parent after adding position: static to childs</span>
</div>
</div>
<p>
<span class="page__point">8</span>
All inline values won't be changed on block values like when adding position: absolute or fixed.
</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box position-static">
<span class="demo-box__text">I'm the item with display: inline</span>
</span>
</div>
</div>
<span class="page__demo-caption">the inline value is saved</span>
</div>
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box display-inline-block position-static">
<span class="demo-box__text">I'm the item with display: inline-block</span>
</div>
</div>
</div>
<span class="page__demo-caption">the inline-block value is saved</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box display-inline-flex position-static">
<span class="demo-box__text">I'm the item with display: inline-flex</span>
</span>
</div>
</div>
<span class="page__demo-caption">the inline-flex value is saved</span>
</div>
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box display-inline-grid position-static">
<span class="demo-box__text">I'm the item with display: inline-grid</span>
</div>
</div>
</div>
<span class="page__demo-caption">the inline-grid value is saved</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box display-inline-table position-static">
<span class="demo-box__text">I'm the item with display: inline-table</span>
</span>
</div>
</div>
<span class="page__demo-caption">the inline-table value is saved</span>
</div>
</div>
<p>
<span class="page__point">9</span>
By default, the width and height properties of elements with display: inline are computed depending on content. That behavior is saved without changing the computed value.
</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box">
<span class="demo-box__text">I'm the item with display: inline</span>
</span>
</div>
</div>
<span class="page__demo-caption">the width and height properties are defined in the auto value before adding position: static</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box position-static">
<span class="demo-box__text">I'm the item with display: inline</span>
</span>
</div>
</div>
<span class="page__demo-caption">the width and height properties are defined in the auto value after adding position: static</span>
</div>
</div>
<p>
<span class="page__point">10</span>
As well as these properties can't be applied to elements with display: inline. Adding position: static doesn't change that.
</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box demo-box_with-sizes">
<span class="demo-box__text">I'm the item with display: inline</span>
</span>
</div>
</div>
<span class="page__demo-caption">width: 148px and height: 148px are applied to the item before adding position: static</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box demo-box_with-sizes position-static">
<span class="demo-box__text">I'm the item with display: inline</span>
</span>
</div>
</div>
<span class="page__demo-caption">width: 148px and height: 148px are applied to the item after adding position: static</span>
</div>
</div>
<p>
Also these properties are applied to elements with all other inline-* values. So we won't get any changes after adding position: static.
</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box demo-box_with-sizes display-inline-flex">
<span class="demo-box__text">I'm the item with display: inline-flex</span>
</span>
</div>
</div>
<span class="page__demo-caption">width: 148px and height: 148px are applied to the item before adding position: static</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box demo-box_with-sizes display-inline-flex position-static">
<span class="demo-box__text">I'm the item with display: inline-flex</span>
</span>
</div>
</div>
<span class="page__demo-caption">width: 148px and height: 148px are applied to the item after adding position: static</span>
</div>
</div>
<p>
<span class="page__point">11</span>
The vertical paddings, borders and margins of elements with display: inline continue to extend beyond the parent after adding position: static.
</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box is-padding">
<span class="demo-box__text">I'm the item with display: inline</span>
</span>
</div>
</div>
<span class="page__demo-caption">paddings before adding position: static</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box is-padding position-static">
<span class="demo-box__text">I'm the item with display: inline</span>
</span>
</div>
</div>
<span class="page__demo-caption">paddings after adding position: static</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box is-border">
<span class="demo-box__text">I'm the item with display: inline</span>
</span>
</div>
</div>
<span class="page__demo-caption">borders before adding position: static</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box is-border position-static">
<span class="demo-box__text">I'm the item with display: inline</span>
</span>
</div>
</div>
<span class="page__demo-caption">borders after adding position: static</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box is-margin">
<span class="demo-box__text">I'm the item with display: inline</span>
</span>
</div>
</div>
<span class="page__demo-caption">margins before adding position: static</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box is-margin position-static">
<span class="demo-box__text">I'm the item with display: inline</span>
</span>
</div>
</div>
<span class="page__demo-caption">margins after adding position: static</span>
</div>
</div>
<p>
The same properties for the elements with display: inline-* don't extend beyond the parent. So there aren't changes after adding position: static.
</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box is-padding display-inline-grid">
<span class="demo-box__text">I'm the item with display: inline-grid</span>
</span>
</div>
</div>
<span class="page__demo-caption">paddings before adding position: static</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box is-padding display-inline-grid position-static">
<span class="demo-box__text">I'm the item with display: inline-grid</span>
</span>
</div>
</div>
<span class="page__demo-caption">paddings after adding position: static</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box is-border display-inline-grid">
<span class="demo-box__text">I'm the item with display: inline-grid</span>
</span>
</div>
</div>
<span class="page__demo-caption">borders before adding position: static</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box is-border display-inline-grid position-static">
<span class="demo-box__text">I'm the item with display: inline-grid</span>
</span>
</div>
</div>
<span class="page__demo-caption">borders after adding position: static</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box is-margin display-inline-grid">
<span class="demo-box__text">I'm the item with display: inline-grid</span>
</span>
</div>
</div>
<span class="page__demo-caption">margins before adding position: static</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box is-margin display-inline-flex position-static">
<span class="demo-box__text">I'm the item with display: inline-grid</span>
</span>
</div>
</div>
<span class="page__demo-caption">margins after adding position: static</span>
</div>
</div>
<p>
<span class="page__point">12</span>
Elements with inline values for the display property are positioned in a row by default. When adding position: static that behavior is saved.
</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box">
<span class="demo-box__text">I'm the item with display: inline #1</span>
</span>
<span class="demo-box">
<span class="demo-box__text">I'm the item with display: inline #2</span>
</span>
<span class="demo-box">
<span class="demo-box__text">I'm the item with display: inline #3</span>
</span>
<span class="demo-box">
<span class="demo-box__text">I'm the item with display: inline #4</span>
</span>
</div>
</div>
<span class="page__demo-caption">the items before adding position: static</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box position-static">
<span class="demo-box__text">I'm the item with display: inline #1</span>
</span>
<span class="demo-box position-static">
<span class="demo-box__text">I'm the item with display: inline #2</span>
</span>
<span class="demo-box position-static">
<span class="demo-box__text">I'm the item with display: inline #3</span>
</span>
<span class="demo-box position-static">
<span class="demo-box__text">I'm the item with display: inline #4</span>
</span>
</div>
</div>
<span class="page__demo-caption">the items after adding position: static</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box display-inline-flex">
<span class="demo-box__text">I'm the item with display: inline-flex #1</span>
</span>
<span class="demo-box display-inline-flex">
<span class="demo-box__text">I'm the item with display: inline-flex #2</span>
</span>
<span class="demo-box display-inline-flex">
<span class="demo-box__text">I'm the item with display: inline-flex #3</span>
</span>
<span class="demo-box display-inline-flex">
<span class="demo-box__text">I'm the item with display: inline-flex #4</span>
</span>
</div>
</div>
<span class="page__demo-caption">the items before adding position: static</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box display-inline-flex position-static">
<span class="demo-box__text">I'm the item with display: inline-flex #1</span>
</span>
<span class="demo-box display-inline-flex position-static">
<span class="demo-box__text">I'm the item with display: inline-flex #2</span>
</span>
<span class="demo-box display-inline-flex position-static">
<span class="demo-box__text">I'm the item with display: inline-flex #3</span>
</span>
<span class="demo-box display-inline-flex position-static">
<span class="demo-box__text">I'm the item with display: inline-flex #4</span>
</span>
</div>
</div>
<span class="page__demo-caption">the items after adding position: static</span>
</div>
</div>
<p>
They also can't overlap the elements before and after them.
</p>
<p class="ha-screen-reader">There are 4 elements, the first two elements don't have position static and the 3 and 4 have. All elements are displayed each other in a row without overlapping.</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: inline #1</span>
</span>
<span class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: inline #2</span>
</span>
<span class="demo-box">
<span class="demo-box__text">I'm the item with display: inline #3</span>
</span>
<span class="demo-box">
<span class="demo-box__text">I'm the item with display: inline #4</span>
</span>
<span class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: inline #5</span>
</span>
</div>
</div>
<span class="page__demo-caption">the items before adding position: static to items #3 and #4</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: inline #1</span>
</span>
<span class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: inline #2</span>
</span>
<span class="demo-box position-static">
<span class="demo-box__text">I'm the item with display: inline #3</span>
</span>
<span class="demo-box position-static">
<span class="demo-box__text">I'm the item with display: inline #4</span>
</span>
<span class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: inline #5</span>
</span>
</div>
</div>
<span class="page__demo-caption">the items after adding position: static to items #3 and #4</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box demo-box_accent display-inline-grid">
<span class="demo-box__text">I'm just the item with display: inline-grid #1</span>
</span>
<span class="demo-box demo-box_accent display-inline-grid">
<span class="demo-box__text">I'm just the item with display: inline-grid #2</span>
</span>
<span class="demo-box display-inline-grid">
<span class="demo-box__text">I'm the item with display: inline-grid #3</span>
</span>
<span class="demo-box display-inline-grid">
<span class="demo-box__text">I'm the item with display: inline-grid #4</span>
</span>
<span class="demo-box demo-box_accent display-inline-grid">
<span class="demo-box__text">I'm just the item with display: inline-grid #5</span>
</span>
</div>
</div>
<span class="page__demo-caption">the items before adding position: static to items #3 and #4</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box demo-box_accent display-inline-grid">
<span class="demo-box__text">I'm just the item with display: inline-grid #1</span>
</span>
<span class="demo-box display-inline-grid demo-box_accent">
<span class="demo-box__text">I'm just the item with display: inline-grid #2</span>
</span>
<span class="demo-box display-inline-grid position-static">
<span class="demo-box__text">I'm the item with display: inline-grid #3</span>
</span>
<span class="demo-box display-inline-grid position-static">
<span class="demo-box__text">I'm the item with display: inline-grid #4</span>
</span>
<span class="demo-box demo-box_accent display-inline-grid">
<span class="demo-box__text">I'm just the item with display: inline-grid #5</span>
</span>
</div>
</div>
<span class="page__demo-caption">the items after adding position: static to items #3 and #4</span>
</div>
</div>
<h3>Flex items</h3>
<p>
<span class="page__point">13</span>
Flex items keep to stretch by the additional axis when adding position: static to them.
</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-row">
<div class="demo-box">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">the flex item before adding position: static when the parent has flex-direction: row</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-row">
<div class="demo-box position-static">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">the flex item after adding position: static when the parent has flex-direction: row</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-column">
<div class="demo-box">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">the flex item before adding position: static when the parent has flex-direction: column</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-column">
<div class="demo-box position-static">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">the flex item after adding position: static when the parent has flex-direction: column</span>
</div>
</div>
<p>
<span class="page__point">14</span>
After adding position: static flex items are positioned by main axis.
</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-row">
<div class="demo-box">
<span class="demo-box__text">I'm the flex item #1</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the flex item #2</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the flex item #3</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the flex item #4</span>
</div>
</div>
</div>
<span class="page__demo-caption">the flex items are positioned in a row before adding position: static when the parent has flex-direction: row</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-row">
<div class="demo-box position-static">
<span class="demo-box__text">I'm the flex item #1</span>
</div>
<div class="demo-box position-static">
<span class="demo-box__text">I'm the flex item #2</span>
</div>
<div class="demo-box position-static">
<span class="demo-box__text">I'm the flex item #3</span>
</div>
<div class="demo-box position-static">
<span class="demo-box__text">I'm the flex item #4</span>
</div>
</div>
</div>
<span class="page__demo-caption">the flex items are overlapped after adding position: static when the parent has flex-direction: row</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-column">
<div class="demo-box">
<span class="demo-box__text">I'm the flex item #1</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the flex item #2</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the flex item #3</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the flex item #4</span>
</div>
</div>
</div>
<span class="page__demo-caption">the flex items are positioned in a column before adding position: static when the parent has flex-direction: column</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-column">
<div class="demo-box position-static">
<span class="demo-box__text">I'm the flex item #1</span>
</div>
<div class="demo-box position-static">
<span class="demo-box__text">I'm the flex item #2</span>
</div>
<div class="demo-box position-static">
<span class="demo-box__text">I'm the flex item #3</span>
</div>
<div class="demo-box position-static">
<span class="demo-box__text">I'm the flex item #4</span>
</div>
</div>
</div>
<span class="page__demo-caption">the flex items are overlapped after adding position: static when the parent has flex-direction: column</span>
</div>
</div>
<p>
Elements with position: static can't overlap any nearby elements that might be before or after them.
</p>
<p class="ha-screen-reader">There are 4 elements, the 1 and 4 elements don't have position static and the 2 and 3 have. All elements are displayed each other in a row without overlapping.</p>
<p class="ha-screen-reader">There are 4 elements, the 1 and 4 elements don't have position static and the 2 and 3 have. All elements are displayed below each other in a column without overlapping.</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-row">
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the flex item #1</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the flex item #2</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the flex item #3</span>
</div>
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the flex item #4</span>
</div>
</div>
</div>
<span class="page__demo-caption">the flex items before adding position: static flex items #2 and #3 when the parent has flex-direction: row</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-row">
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the flex item #1</span>
</div>
<div class="demo-box position-static">
<span class="demo-box__text">I'm the flex item #2</span>
</div>
<div class="demo-box position-static">
<span class="demo-box__text">I'm the flex item #3</span>
</div>
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the flex item #4</span>
</div>
</div>
</div>
<span class="page__demo-caption">the flex items after adding position: static flex items #2 and #3 when the parent has flex-direction: row</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-column">
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the flex item #1</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the flex item #2</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the flex item #3</span>
</div>
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the flex item #4</span>
</div>
</div>
</div>
<span class="page__demo-caption">the flex items before adding position: static flex items #2 and #3 when the parent has flex-direction: column</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-column">
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the flex item #1</span>
</div>
<div class="demo-box position-static">
<span class="demo-box__text">I'm the flex item #2</span>
</div>
<div class="demo-box position-static">
<span class="demo-box__text">I'm the flex item #3</span>
</div>
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the flex item #4</span>
</div>
</div>
</div>
<span class="page__demo-caption">the flex items after adding position: static flex items #2 and #3 when the parent has flex-direction: column</span>
</div>
</div>
<p>
<span class="page__point">15</span>
If we defined the width and height properties to flex items we won't get any changes after adding position: static to them.
</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-row">
<div class="demo-box demo-box_with-sizes">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">width: 148px and height: 148px are applied to the flex item before adding position: static</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-row">
<div class="demo-box demo-box_with-sizes position-static">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">width: 148px and height: 148px are applied to the flex item after adding position: static</span>
</div>
</div>
<p>
<span class="page__point">16</span>
The padding, border and margin properties continue working without changes when adding position: static to flex items.
</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-row">
<div class="demo-box is-padding">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">paddings before adding position: static when the parent has flex-direction: row</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-row">
<div class="demo-box is-padding position-static">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">paddings after adding position: static when the parent has flex-direction: row</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-column">
<div class="demo-box is-padding">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">paddings before adding position: static when the parent has flex-direction: column</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-column">
<div class="demo-box is-padding position-static">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">paddings after adding position: static when the parent has flex-direction: column</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-row">
<div class="demo-box is-border">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">borders before adding position: static when the parent has flex-direction: row</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-row">
<div class="demo-box is-border position-static">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">borders after adding position: static when the parent has flex-direction: row</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-column">
<div class="demo-box is-border">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">borders before adding position: static when the parent has flex-direction: column</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-column">
<div class="demo-box is-border position-static">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">borders after adding position: static when the parent has flex-direction: column</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-row">
<div class="demo-box is-margin">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">margins before adding position: static when the parent has flex-direction: row</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-row">
<div class="demo-box is-margin position-static">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">margins after adding position: static when the parent has flex-direction: row</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-column">
<div class="demo-box is-margin">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">margins before adding position: static when the parent has flex-direction: column</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-column">
<div class="demo-box is-margin position-static">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">margins after adding position: static when the parent has flex-direction: column</span>
</div>
</div>
</section>
<section id="sticky-tab" aria-labelledby="sticky" role="tabpanel" tabindex="0" class="page__content" hidden>
<h3>The block values</h3>
<div class="page__remark">
<p>
Note! I mean the block values are the block, flex and grid value
</p>
</div>
<p>
<span class="page__point">1</span>
When we add position: sticky to all childs we don't get any changes. The parent height still is computed depending on the childs height.
</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box">
<span class="demo-box__text">I'm the item with display: block</span>
</div>
</div>
</div>
<span class="page__demo-caption">the height property of the parent before adding position: sticky to childs</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box position-sticky">
<span class="demo-box__text">I'm the item with display: block</span>
</div>
</div>
</div>
<span class="page__demo-caption">the height property of the parent after adding position: sticky to childs</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box display-flex">
<span class="demo-box__text">I'm the item with display: flex</span>
</div>
</div>
</div>
<span class="page__demo-caption">the height property of the parent before adding position: sticky to childs</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box display-flex position-sticky">
<span class="demo-box__text">I'm the item with display: flex</span>
</div>
</div>
</div>
<span class="page__demo-caption">the height property of the parent after adding position: sticky to childs</span>
</div>
</div>
<p>
That works if we add position: sticky to a part of the childs.
</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: block #1</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the item with display: block #2</span>
</div>
</div>
</div>
<span class="page__demo-caption">the height property of the parent before adding position: sticky to item #2</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="page__demo-viewport">
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: block #1</span>
</div>
<div class="demo-box position-sticky">
<span class="demo-box__text">I'm the item with display: block #2</span>
</div>
</div>
</div>
</div>
<span class="page__demo-caption">the height property of the parent after adding position: sticky to item #2</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box demo-box_accent display-grid">
<span class="demo-box__text">I'm the item with display: grid #1</span>
</div>
<div class="demo-box display-grid">
<span class="demo-box__text">I'm the item with display: grid #2</span>
</div>
</div>
</div>
<span class="page__demo-caption">the height property of the parent before adding position: sticky to childs</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box demo-box_accent display-grid">
<span class="demo-box__text">I'm the item with display: grid #1</span>
</div>
<div class="demo-box display-grid position-sticky">
<span class="demo-box__text">I'm the item with display: grid #2</span>
</div>
</div>
</div>
<span class="page__demo-caption">the height property of the parent after adding position: sticky to childs</span>
</div>
</div>
<p>
<span class="page__point">2</span>
Adding position: sticky doesn't change the display computed value. All values are saved.
</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box position-sticky">
<span class="demo-box__text">I'm the item with display: block</span>
</div>
</div>
</div>
<span class="page__demo-caption">the block value is saved</span>
</div>
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box display-flex position-sticky">
<span class="demo-box__text">I'm the item with display: flex</span>
</div>
</div>
</div>
<span class="page__demo-caption">the flex value is saved</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box display-grid position-sticky">
<span class="demo-box__text">I'm the item with display: grid</span>
</div>
</div>
</div>
<span class="page__demo-caption">the grid value is saved</span>
</div>
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box display-table position-sticky">
<span class="demo-box__text">I'm the item with display: table</span>
</div>
</div>
</div>
<span class="page__demo-caption">the table value is saved</span>
</div>
</div>
<p>
<span class="page__point">3</span>
The default working principle of the width and height properties is saved.
</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box">
<span class="demo-box__text">I'm the item with display: block</span>
</div>
</div>
</div>
<span class="page__demo-caption">the width and height properties before adding position: sticky</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box position-sticky">
<span class="demo-box__text">I'm the item with display: block</span>
</div>
</div>
</div>
<span class="page__demo-caption">the width and height properties after adding position: sticky</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box display-flex">
<span class="demo-box__text">I'm the item with display: flex</span>
</div>
</div>
</div>
<span class="page__demo-caption">the width and height properties before adding position: sticky</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box display-flex position-sticky">
<span class="demo-box__text">I'm the item with display: flex</span>
</div>
</div>
</div>
<span class="page__demo-caption">the width and height properties after adding position: sticky</span>
</div>
</div>
<p>
The element with display: table differs from another values. The width property doesn't fill up all free space. Adding position: sticky doesn't affect it.
</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box display-table">
<span class="demo-box__text">I'm the item with display: table</span>
</div>
</div>
</div>
<span class="page__demo-caption">the width and height properties before adding position: sticky</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box display-table position-sticky">
<span class="demo-box__text">I'm the item with display: table</span>
</div>
</div>
</div>
<span class="page__demo-caption">the width and height properties after adding position: sticky</span>
</div>
</div>
<p>
<span class="page__point">4</span>
Since the width and height properties can be applied to elements with block values we don't get some changes when we add position: sticky to them.
</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box demo-box_with-sizes">
<span class="demo-box__text">I'm the item with display: block</span>
</div>
</div>
</div>
<span class="page__demo-caption">width: 148px and height: 148px are applied to the item before adding position: sticky</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box demo-box_with-sizes position-sticky">
<span class="demo-box__text">I'm the item with display: block</span>
</div>
</div>
</div>
<span class="page__demo-caption">width: 148px and height: 148px are applied to the item after adding position: sticky</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box demo-box_with-sizes display-flex">
<span class="demo-box__text">I'm the item with display: flex</span>
</div>
</div>
</div>
<span class="page__demo-caption">width: 148px and height: 148px are applied to the item before adding position: sticky</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box demo-box_with-sizes display-flex position-sticky">
<span class="demo-box__text">I'm the item with display: flex</span>
</div>
</div>
</div>
<span class="page__demo-caption">width: 148px and height: 148px are applied to the item after adding position: sticky</span>
</div>
</div>
<p>
<span class="page__point">5</span>
The padding and border properties work without changes for elements after adding position: sticky.
</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box is-padding">
<span class="demo-box__text">I'm the item with display: block</span>
</div>
</div>
</div>
<span class="page__demo-caption">paddings before adding position: sticky</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box is-padding position-sticky">
<span class="demo-box__text">I'm the item with display: block</span>
</div>
</div>
</div>
<span class="page__demo-caption">paddings after adding position: sticky</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box is-padding display-grid">
<span class="demo-box__text">I'm the item with display: grid</span>
</div>
</div>
</div>
<span class="page__demo-caption">paddings before adding position: sticky</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box is-padding display-grid position-sticky">
<span class="demo-box__text">I'm the item with display: grid</span>
</div>
</div>
</div>
<span class="page__demo-caption">paddings after adding position: sticky</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box is-border">
<span class="demo-box__text">I'm the item with display: block</span>
</div>
</div>
</div>
<span class="page__demo-caption">borders before adding position: sticky</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box is-border position-sticky">
<span class="demo-box__text">I'm the item with display: block</span>
</div>
</div>
</div>
<span class="page__demo-caption">borders after adding position: sticky</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box is-border display-grid">
<span class="demo-box__text">I'm the item with display: grid</span>
</div>
</div>
</div>
<span class="page__demo-caption">borders before adding position: sticky</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box is-border display-grid position-sticky">
<span class="demo-box__text">I'm the item with display: grid</span>
</div>
</div>
</div>
<span class="page__demo-caption">borders after adding position: sticky</span>
</div>
</div>
<p>
Margin Collapsing of the elements with block values works too. Vertical margins extend beyond the parent. Margins between the elements collapse.
</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box is-margin">
<span class="demo-box__text">I'm the item with display: block #1</span>
</div>
<div class="demo-box is-margin">
<span class="demo-box__text">I'm the item with display: block #2</span>
</div>
</div>
</div>
<span class="page__demo-caption">margins before adding position: sticky</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box is-margin position-sticky">
<span class="demo-box__text">I'm the item with display: block #1</span>
</div>
<div class="demo-box is-margin position-sticky">
<span class="demo-box__text">I'm the item with display: block #2</span>
</div>
</div>
</div>
<span class="page__demo-caption">margins after adding position: sticky</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box is-margin display-flex">
<span class="demo-box__text">I'm the item with display: flex #1</span>
</div>
<div class="demo-box is-margin display-flex">
<span class="demo-box__text">I'm the item with display: flex #2</span>
</div>
</div>
</div>
<span class="page__demo-caption">margins before adding position: sticky</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box is-margin display-flex position-sticky">
<span class="demo-box__text">I'm the item with display: flex #1</span>
</div>
<div class="demo-box is-margin display-flex position-sticky">
<span class="demo-box__text">I'm the item with display: flex #2</span>
</div>
</div>
</div>
<span class="page__demo-caption">margins after adding position: sticky</span>
</div>
</div>
<p>
<span class="page__point">6</span>
When adding position: sticky elements with block values are positioned one below the other.
</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box">
<span class="demo-box__text">I'm the item with display: block #1</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the item with display: block #2</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the item with display: block #3</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the item with display: block #4</span>
</div>
</div>
</div>
<span class="page__demo-caption">the items before adding position: sticky</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box position-sticky">
<span class="demo-box__text">I'm the item with display: block #1</span>
</div>
<div class="demo-box position-sticky">
<span class="demo-box__text">I'm the item with display: block #2</span>
</div>
<div class="demo-box position-sticky">
<span class="demo-box__text">I'm the item with display: block #3</span>
</div>
<div class="demo-box position-sticky">
<span class="demo-box__text">I'm the item with display: block #4</span>
</div>
</div>
</div>
<span class="page__demo-caption">the items after adding position: sticky</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box display-grid">
<span class="demo-box__text">I'm the item with display: grid #1</span>
</div>
<div class="demo-box display-grid">
<span class="demo-box__text">I'm the item with display: grid #2</span>
</div>
<div class="demo-box display-grid">
<span class="demo-box__text">I'm the item with display: grid #3</span>
</div>
<div class="demo-box display-grid">
<span class="demo-box__text">I'm the item with display: grid #4</span>
</div>
</div>
</div>
<span class="page__demo-caption">the items before adding position: sticky</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box display-grid position-sticky">
<span class="demo-box__text">I'm the item with display: grid #1</span>
</div>
<div class="demo-box display-grid position-sticky">
<span class="demo-box__text">I'm the item with display: grid #2</span>
</div>
<div class="demo-box display-grid position-sticky">
<span class="demo-box__text">I'm the item with display: grid #3</span>
</div>
<div class="demo-box display-grid position-sticky">
<span class="demo-box__text">I'm the item with display: grid #4</span>
</div>
</div>
</div>
<span class="page__demo-caption">the items after adding position: sticky</span>
</div>
</div>
<p>
Elements with position: sticky can't overlap nearby elements without position: sticky that are before or after them.
</p>
<p class="ha-screen-reader">There are 4 elements, the first two elements don't have position sticky and the 3 and 4 have. All elements are displayed below each other in a column without overlapping.</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: block #1</span>
</div>
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: block #2</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the item with display: block #3</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the item with display: block #4</span>
</div>
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: block #5</span>
</div>
</div>
</div>
<span class="page__demo-caption">the items before adding position: sticky to items #3 and #4</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: block #1</span>
</div>
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: block #2</span>
</div>
<div class="demo-box position-sticky">
<span class="demo-box__text">I'm the item with display: block #3</span>
</div>
<div class="demo-box position-sticky">
<span class="demo-box__text">I'm the item with display: block #4</span>
</div>
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: block #5</span>
</div>
</div>
</div>
<span class="page__demo-caption">the items after adding position: sticky to items #3 and #4</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box demo-box_accent display-flex">
<span class="demo-box__text">I'm just the item with display: flex #1</span>
</div>
<div class="demo-box demo-box_accent display-flex">
<span class="demo-box__text">I'm just the item with display: flex #2</span>
</div>
<div class="demo-box display-flex">
<span class="demo-box__text">I'm the item with display: flex #3</span>
</div>
<div class="demo-box display-flex">
<span class="demo-box__text">I'm the item with display: flex #4</span>
</div>
<div class="demo-box demo-box_accent display-flex">
<span class="demo-box__text">I'm just the item with display: flex #5</span>
</div>
</div>
</div>
<span class="page__demo-caption">the items before adding position: sticky to items #3 and #4</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box demo-box_accent display-flex">
<span class="demo-box__text">I'm just the item with display: flex #1</span>
</div>
<div class="demo-box demo-box_accent display-flex">
<span class="demo-box__text">I'm just the item with display: flex #2</span>
</div>
<div class="demo-box display-flex position-sticky">
<span class="demo-box__text">I'm the item with display: flex #3</span>
</div>
<div class="demo-box display-flex position-sticky">
<span class="demo-box__text">I'm the item with display: flex #4</span>
</div>
<div class="demo-box demo-box_accent display-flex">
<span class="demo-box__text">I'm just the item with display: flex #5</span>
</div>
</div>
</div>
<span class="page__demo-caption">the items after adding position: sticky to items #3 and #4</span>
</div>
</div>
<h3>The inline values</h3>
<div class="page__remark">
<p>
Note! I mean the inline values are the inline, inline-block, inline-flex and inline-grid value
</p>
</div>
<p>
<span class="page__point">7</span>
As with block values when adding position: sticky to all childs the parent height is computed depending on the childs height.
</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box">
<span class="demo-box__text">I'm the item with display: inline</span>
</span>
</div>
</div>
<span class="page__demo-caption">the height property of the parent before adding position: sticky to childs</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box position-sticky">
<span class="demo-box__text">I'm the item with display: inline</span>
</span>
</div>
</div>
<span class="page__demo-caption">the height property of the parent after adding position: sticky to childs</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box display-inline-block">
<span class="demo-box__text">I'm the item with display: inline-block</span>
</span>
</div>
</div>
<span class="page__demo-caption">the height property of the parent before adding position: sticky to childs</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box display-inline-block position-sticky">
<span class="demo-box__text">I'm the item with display: inline-block</span>
</span>
</div>
</div>
<span class="page__demo-caption">the height property of the parent after adding position: sticky to childs</span>
</div>
</div>
<p>
That behavior is saved if to add position: sticky to a part of the childs.
</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box demo-box_accent">
<span class="demo-box__text">I'm the item with display: inline #1</span>
</span>
<span class="demo-box demo-box_accent">
<span class="demo-box__text">I'm the item with display: inline #2</span>
</span>
<span class="demo-box demo-box_accent">
<span class="demo-box__text">I'm the item with display: inline #3</span>
</span>
<span class="demo-box demo-box_accent">
<span class="demo-box__text">I'm the item with display: inline #4</span>
</span>
<span class="demo-box">
<span class="demo-box__text">I'm the item with display: inline #5</span>
</span>
</div>
</div>
<span class="page__demo-caption">the height property of the parent before adding position: sticky to childs</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box demo-box_accent">
<span class="demo-box__text">I'm the item with display: inline #1</span>
</span>
<span class="demo-box demo-box_accent">
<span class="demo-box__text">I'm the item with display: inline #2</span>
</span>
<span class="demo-box demo-box_accent">
<span class="demo-box__text">I'm the item with display: inline #3</span>
</span>
<span class="demo-box demo-box_accent">
<span class="demo-box__text">I'm the item with display: inline #4</span>
</span>
<span class="demo-box position-sticky">
<span class="demo-box__text">I'm the item with display: inline #5</span>
</span>
</div>
</div>
<span class="page__demo-caption">the height property of the parent after adding position: sticky to childs</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box demo-box_accent display-inline-block">
<span class="demo-box__text">I'm the item with display: inline-block #1</span>
</span>
<span class="demo-box demo-box_accent display-inline-block">
<span class="demo-box__text">I'm the item with display: inline-block #2</span>
</span>
<span class="demo-box demo-box_accent display-inline-block">
<span class="demo-box__text">I'm the item with display: inline-block #3</span>
</span>
<span class="demo-box demo-box_accent display-inline-block">
<span class="demo-box__text">I'm the item with display: inline-block #4</span>
</span>
<span class="demo-box display-inline-block">
<span class="demo-box__text">I'm the item with display: inline-block #5</span>
</span>
</div>
</div>
<span class="page__demo-caption">the height property of the parent before adding position: sticky to childs</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box demo-box_accent display-inline-block">
<span class="demo-box__text">I'm the item with display: inline-block #1</span>
</span>
<span class="demo-box demo-box_accent display-inline-block">
<span class="demo-box__text">I'm the item with display: inline-block #2</span>
</span>
<span class="demo-box demo-box_accent display-inline-block">
<span class="demo-box__text">I'm the item with display: inline-block #3</span>
</span>
<span class="demo-box demo-box_accent display-inline-block">
<span class="demo-box__text">I'm the item with display: inline-block #4</span>
</span>
<span class="demo-box position-sticky display-inline-block">
<span class="demo-box__text">I'm the item with display: inline-block #5</span>
</span>
</div>
</div>
<span class="page__demo-caption">the height property of the parent after adding position: sticky to childs</span>
</div>
</div>
<p>
<span class="page__point">8</span>
All inline values won't be changed on block values like when adding position: absolute or fixed.
</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box position-sticky">
<span class="demo-box__text">I'm the item with display: inline</span>
</span>
</div>
</div>
<span class="page__demo-caption">the inline value is saved</span>
</div>
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box display-inline-block position-sticky">
<span class="demo-box__text">I'm the item with display: inline-block</span>
</div>
</div>
</div>
<span class="page__demo-caption">the inline-block value is saved</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box display-inline-flex position-sticky">
<span class="demo-box__text">I'm the item with display: inline-flex</span>
</span>
</div>
</div>
<span class="page__demo-caption">the inline-flex value is saved</span>
</div>
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<div class="demo-box display-inline-grid position-sticky">
<span class="demo-box__text">I'm the item with display: inline-grid</span>
</div>
</div>
</div>
<span class="page__demo-caption">the inline-grid value is saved</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box display-inline-table position-sticky">
<span class="demo-box__text">I'm the item with display: inline-table</span>
</span>
</div>
</div>
<span class="page__demo-caption">the inline-table value is saved</span>
</div>
</div>
<p>
<span class="page__point">9</span>
By default, the width and height properties of elements with display: inline are computed depending on content. That behavior is saved without changing the computed value.
</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box">
<span class="demo-box__text">I'm the item with display: inline</span>
</span>
</div>
</div>
<span class="page__demo-caption">the width and height properties are defined in the auto value before adding position: sticky</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box position-sticky">
<span class="demo-box__text">I'm the item with display: inline</span>
</span>
</div>
</div>
<span class="page__demo-caption">the width and height properties are defined in the auto value after adding position: sticky</span>
</div>
</div>
<p>
<span class="page__point">10</span>
As well as these properties can't be applied to elements with display: inline. Adding position: sticky doesn't change that.
</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box demo-box_with-sizes">
<span class="demo-box__text">I'm the item with display: inline</span>
</span>
</div>
</div>
<span class="page__demo-caption">width: 148px and height: 148px are applied to the item before adding position: sticky</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box demo-box_with-sizes position-sticky">
<span class="demo-box__text">I'm the item with display: inline</span>
</span>
</div>
</div>
<span class="page__demo-caption">width: 148px and height: 148px are applied to the item after adding position: sticky</span>
</div>
</div>
<p>
Also these properties are applied to elements with all other inline-* values. So we won't get any changes after adding position: sticky.
</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box demo-box_with-sizes display-inline-flex">
<span class="demo-box__text">I'm the item with display: inline-flex</span>
</span>
</div>
</div>
<span class="page__demo-caption">width: 148px and height: 148px are applied to the item before adding position: sticky</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box demo-box_with-sizes display-inline-flex position-sticky">
<span class="demo-box__text">I'm the item with display: inline-flex</span>
</span>
</div>
</div>
<span class="page__demo-caption">width: 148px and height: 148px are applied to the item after adding position: sticky</span>
</div>
</div>
<p>
<span class="page__point">11</span>
The vertical paddings, borders and margins of elements with display: inline continue to extend beyond the parent after adding position: sticky.
</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box is-padding">
<span class="demo-box__text">I'm the item with display: inline</span>
</span>
</div>
</div>
<span class="page__demo-caption">paddings before adding position: sticky</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box is-padding position-sticky">
<span class="demo-box__text">I'm the item with display: inline</span>
</span>
</div>
</div>
<span class="page__demo-caption">paddings after adding position: sticky</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box is-border">
<span class="demo-box__text">I'm the item with display: inline</span>
</span>
</div>
</div>
<span class="page__demo-caption">borders before adding position: sticky</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box is-border position-sticky">
<span class="demo-box__text">I'm the item with display: inline</span>
</span>
</div>
</div>
<span class="page__demo-caption">borders after adding position: sticky</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box is-margin">
<span class="demo-box__text">I'm the item with display: inline</span>
</span>
</div>
</div>
<span class="page__demo-caption">margins before adding position: sticky</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box is-margin position-sticky">
<span class="demo-box__text">I'm the item with display: inline</span>
</span>
</div>
</div>
<span class="page__demo-caption">margins after adding position: sticky</span>
</div>
</div>
<p>
The same properties for the elements with display: inline-* don't extend beyond the parent. So there aren't changes after adding position: sticky.
</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box is-padding display-inline-grid">
<span class="demo-box__text">I'm the item with display: inline-grid</span>
</span>
</div>
</div>
<span class="page__demo-caption">paddings before adding position: sticky</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box is-padding display-inline-grid position-sticky">
<span class="demo-box__text">I'm the item with display: inline-grid</span>
</span>
</div>
</div>
<span class="page__demo-caption">paddings after adding position: sticky</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box is-border display-inline-grid">
<span class="demo-box__text">I'm the item with display: inline-grid</span>
</span>
</div>
</div>
<span class="page__demo-caption">borders before adding position: sticky</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box is-border display-inline-grid position-sticky">
<span class="demo-box__text">I'm the item with display: inline-grid</span>
</span>
</div>
</div>
<span class="page__demo-caption">borders after adding position: sticky</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box is-margin display-inline-grid">
<span class="demo-box__text">I'm the item with display: inline-grid</span>
</span>
</div>
</div>
<span class="page__demo-caption">margins before adding position: sticky</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box is-margin display-inline-flex position-sticky">
<span class="demo-box__text">I'm the item with display: inline-grid</span>
</span>
</div>
</div>
<span class="page__demo-caption">margins after adding position: sticky</span>
</div>
</div>
<p>
<span class="page__point">12</span>
Elements with inline values for the display property are positioned in a row by default. When adding position: sticky that behavior is saved.
</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box">
<span class="demo-box__text">I'm the item with display: inline #1</span>
</span>
<span class="demo-box">
<span class="demo-box__text">I'm the item with display: inline #2</span>
</span>
<span class="demo-box">
<span class="demo-box__text">I'm the item with display: inline #3</span>
</span>
<span class="demo-box">
<span class="demo-box__text">I'm the item with display: inline #4</span>
</span>
</div>
</div>
<span class="page__demo-caption">the items before adding position: sticky</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box position-sticky">
<span class="demo-box__text">I'm the item with display: inline #1</span>
</span>
<span class="demo-box position-sticky">
<span class="demo-box__text">I'm the item with display: inline #2</span>
</span>
<span class="demo-box position-sticky">
<span class="demo-box__text">I'm the item with display: inline #3</span>
</span>
<span class="demo-box position-sticky">
<span class="demo-box__text">I'm the item with display: inline #4</span>
</span>
</div>
</div>
<span class="page__demo-caption">the items after adding position: sticky</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box display-inline-flex">
<span class="demo-box__text">I'm the item with display: inline-flex #1</span>
</span>
<span class="demo-box display-inline-flex">
<span class="demo-box__text">I'm the item with display: inline-flex #2</span>
</span>
<span class="demo-box display-inline-flex">
<span class="demo-box__text">I'm the item with display: inline-flex #3</span>
</span>
<span class="demo-box display-inline-flex">
<span class="demo-box__text">I'm the item with display: inline-flex #4</span>
</span>
</div>
</div>
<span class="page__demo-caption">the items before adding position: sticky</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box display-inline-flex position-sticky">
<span class="demo-box__text">I'm the item with display: inline-flex #1</span>
</span>
<span class="demo-box display-inline-flex position-sticky">
<span class="demo-box__text">I'm the item with display: inline-flex #2</span>
</span>
<span class="demo-box display-inline-flex position-sticky">
<span class="demo-box__text">I'm the item with display: inline-flex #3</span>
</span>
<span class="demo-box display-inline-flex position-sticky">
<span class="demo-box__text">I'm the item with display: inline-flex #4</span>
</span>
</div>
</div>
<span class="page__demo-caption">the items after adding position: sticky</span>
</div>
</div>
<p>
They also can't overlap the elements before and after them.
</p>
<p class="ha-screen-reader">There are 4 elements, the first two elements don't have position sticky and the 3 and 4 have. All elements are displayed each other in a row without overlapping.</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: inline #1</span>
</span>
<span class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: inline #2</span>
</span>
<span class="demo-box">
<span class="demo-box__text">I'm the item with display: inline #3</span>
</span>
<span class="demo-box">
<span class="demo-box__text">I'm the item with display: inline #4</span>
</span>
<span class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: inline #5</span>
</span>
</div>
</div>
<span class="page__demo-caption">the items before adding position: sticky to items #3 and #4</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: inline #1</span>
</span>
<span class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: inline #2</span>
</span>
<span class="demo-box position-sticky">
<span class="demo-box__text">I'm the item with display: inline #3</span>
</span>
<span class="demo-box position-sticky">
<span class="demo-box__text">I'm the item with display: inline #4</span>
</span>
<span class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the item with display: inline #5</span>
</span>
</div>
</div>
<span class="page__demo-caption">the items after adding position: sticky to items #3 and #4</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box demo-box_accent display-inline-grid">
<span class="demo-box__text">I'm just the item with display: inline-grid #1</span>
</span>
<span class="demo-box demo-box_accent display-inline-grid">
<span class="demo-box__text">I'm just the item with display: inline-grid #2</span>
</span>
<span class="demo-box display-inline-grid">
<span class="demo-box__text">I'm the item with display: inline-grid #3</span>
</span>
<span class="demo-box display-inline-grid">
<span class="demo-box__text">I'm the item with display: inline-grid #4</span>
</span>
<span class="demo-box demo-box_accent display-inline-grid">
<span class="demo-box__text">I'm just the item with display: inline-grid #5</span>
</span>
</div>
</div>
<span class="page__demo-caption">the items before adding position: sticky to items #3 and #4</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport">
<span class="demo-box demo-box_accent display-inline-grid">
<span class="demo-box__text">I'm just the item with display: inline-grid #1</span>
</span>
<span class="demo-box display-inline-grid demo-box_accent">
<span class="demo-box__text">I'm just the item with display: inline-grid #2</span>
</span>
<span class="demo-box display-inline-grid position-sticky">
<span class="demo-box__text">I'm the item with display: inline-grid #3</span>
</span>
<span class="demo-box display-inline-grid position-sticky">
<span class="demo-box__text">I'm the item with display: inline-grid #4</span>
</span>
<span class="demo-box demo-box_accent display-inline-grid">
<span class="demo-box__text">I'm just the item with display: inline-grid #5</span>
</span>
</div>
</div>
<span class="page__demo-caption">the items after adding position: sticky to items #3 and #4</span>
</div>
</div>
<h3>Flex items</h3>
<p>
<span class="page__point">13</span>
Flex items keep to stretch by the additional axis when adding position: sticky to them.
</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-row">
<div class="demo-box">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">the flex item before adding position: sticky when the parent has flex-direction: row</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-row">
<div class="demo-box position-sticky">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">the flex item after adding position: sticky when the parent has flex-direction: row</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-column">
<div class="demo-box">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">the flex item before adding position: sticky when the parent has flex-direction: column</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-column">
<div class="demo-box position-sticky">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">the flex item after adding position: sticky when the parent has flex-direction: column</span>
</div>
</div>
<p>
<span class="page__point">14</span>
After adding position: sticky flex items are positioned by main axis.
</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-row">
<div class="demo-box">
<span class="demo-box__text">I'm the flex item #1</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the flex item #2</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the flex item #3</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the flex item #4</span>
</div>
</div>
</div>
<span class="page__demo-caption">the flex items are positioned in a row before adding position: sticky when the parent has flex-direction: row</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-row">
<div class="demo-box position-sticky">
<span class="demo-box__text">I'm the flex item #1</span>
</div>
<div class="demo-box position-sticky">
<span class="demo-box__text">I'm the flex item #2</span>
</div>
<div class="demo-box position-sticky">
<span class="demo-box__text">I'm the flex item #3</span>
</div>
<div class="demo-box position-sticky">
<span class="demo-box__text">I'm the flex item #4</span>
</div>
</div>
</div>
<span class="page__demo-caption">the flex items are overlapped after adding position: sticky when the parent has flex-direction: row</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-column">
<div class="demo-box">
<span class="demo-box__text">I'm the flex item #1</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the flex item #2</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the flex item #3</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the flex item #4</span>
</div>
</div>
</div>
<span class="page__demo-caption">the flex items are positioned in a column before adding position: sticky when the parent has flex-direction: column</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-column">
<div class="demo-box position-sticky">
<span class="demo-box__text">I'm the flex item #1</span>
</div>
<div class="demo-box position-sticky">
<span class="demo-box__text">I'm the flex item #2</span>
</div>
<div class="demo-box position-sticky">
<span class="demo-box__text">I'm the flex item #3</span>
</div>
<div class="demo-box position-sticky">
<span class="demo-box__text">I'm the flex item #4</span>
</div>
</div>
</div>
<span class="page__demo-caption">the flex items are overlapped after adding position: sticky when the parent has flex-direction: column</span>
</div>
</div>
<p>
Elements with position: sticky can't overlap any nearby elements that might be before or after them.
</p>
<p class="ha-screen-reader">There are 4 elements, the 1 and 4 elements don't have position sticky and the 2 and 3 have. All elements are displayed each other in a row without overlapping.</p>
<p class="ha-screen-reader">There are 4 elements, the 1 and 4 elements don't have position sticky and the 2 and 3 have. All elements are displayed below each other in a column without overlapping.</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-row">
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the flex item #1</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the flex item #2</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the flex item #3</span>
</div>
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the flex item #4</span>
</div>
</div>
</div>
<span class="page__demo-caption">the flex items before adding position: sticky flex items #2 and #3 when the parent has flex-direction: row</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-row">
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the flex item #1</span>
</div>
<div class="demo-box position-sticky">
<span class="demo-box__text">I'm the flex item #2</span>
</div>
<div class="demo-box position-sticky">
<span class="demo-box__text">I'm the flex item #3</span>
</div>
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the flex item #4</span>
</div>
</div>
</div>
<span class="page__demo-caption">the flex items after adding position: sticky flex items #2 and #3 when the parent has flex-direction: row</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-column">
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the flex item #1</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the flex item #2</span>
</div>
<div class="demo-box">
<span class="demo-box__text">I'm the flex item #3</span>
</div>
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the flex item #4</span>
</div>
</div>
</div>
<span class="page__demo-caption">the flex items before adding position: sticky flex items #2 and #3 when the parent has flex-direction: column</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-column">
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the flex item #1</span>
</div>
<div class="demo-box position-sticky">
<span class="demo-box__text">I'm the flex item #2</span>
</div>
<div class="demo-box position-sticky">
<span class="demo-box__text">I'm the flex item #3</span>
</div>
<div class="demo-box demo-box_accent">
<span class="demo-box__text">I'm just the flex item #4</span>
</div>
</div>
</div>
<span class="page__demo-caption">the flex items after adding position: sticky flex items #2 and #3 when the parent has flex-direction: column</span>
</div>
</div>
<p>
<span class="page__point">15</span>
If we defined the width and height properties to flex items we won't get any changes after adding position: sticky to them.
</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-row">
<div class="demo-box demo-box_with-sizes">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">width: 148px and height: 148px are applied to the flex item before adding position: sticky</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-row">
<div class="demo-box demo-box_with-sizes position-sticky">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">width: 148px and height: 148px are applied to the flex item after adding position: sticky</span>
</div>
</div>
<p>
<span class="page__point">16</span>
The padding, border and margin properties continue working without changes when adding position: sticky to flex items.
</p>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-row">
<div class="demo-box is-padding">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">paddings before adding position: sticky when the parent has flex-direction: row</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-row">
<div class="demo-box is-padding position-sticky">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">paddings after adding position: sticky when the parent has flex-direction: row</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-column">
<div class="demo-box is-padding">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">paddings before adding position: sticky when the parent has flex-direction: column</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-column">
<div class="demo-box is-padding position-sticky">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">paddings after adding position: sticky when the parent has flex-direction: column</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-row">
<div class="demo-box is-border">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">borders before adding position: sticky when the parent has flex-direction: row</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-row">
<div class="demo-box is-border position-sticky">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">borders after adding position: sticky when the parent has flex-direction: row</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-column">
<div class="demo-box is-border">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">borders before adding position: sticky when the parent has flex-direction: column</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-column">
<div class="demo-box is-border position-sticky">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">borders after adding position: sticky when the parent has flex-direction: column</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-row">
<div class="demo-box is-margin">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">margins before adding position: sticky when the parent has flex-direction: row</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-row">
<div class="demo-box is-margin position-sticky">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">margins after adding position: sticky when the parent has flex-direction: row</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-column">
<div class="demo-box is-margin">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">margins before adding position: sticky when the parent has flex-direction: column</span>
</div>
</div>
<div class="page__demos" aria-hidden="true">
<div class="page__demo">
<div class="page__demo-container">
<div class="page__demo-viewport display-flex flex-direction-column">
<div class="demo-box is-margin position-sticky">
<span class="demo-box__text">I'm the flex item</span>
</div>
</div>
</div>
<span class="page__demo-caption">margins after adding position: sticky when the parent has flex-direction: column</span>
</div>
</div>
</section>
</main>
<aside class="page__widgets" data-uia-control-skin="2">
<div class="page__widgets-item">
<div class="page__widget page__substack">
<div class="page__widget-text">
<p><span aria-hidden="true">👀</span> This cheat sheet is a part of the my project that is named like CSS isn't magic. I offer you to join to me</p>
</div>
<a href="https://cssisntmagic.substack.com/archive" class="page__widget-share ra-link uia-control" target="_top">
<span class="uia-control__group">Join to CSS isn't magic</span>
</a>
</div>
</div>
</aside>
</div>
@import url('https://fonts.googleapis.com/css?family=Baloo+Tammudu|Indie+Flower&display=swap');
:root {
/*
- Spacing following paragraphs to at least 2 times the font size;
The 1.4.12 requirements from WCAG 2.2 https://www.w3.org/TR/WCAG22/#text-spacing
This gap should be computed taking into account the line-height
*/
--_ds-typography-main-margin: var(--ds-typography-main-margin, 1.25em);
}
body {
font-family: var(--ds-typography-main-font-family, system-ui);
font-size: var(--ds-typography-main-font-size, 1rem);
color: var(--ds-typography-main-color, #222);
line-height: var(--ds-typography-main-line-height, 1.75);
}
p:not([class]) {
margin-block: var(--ds-typography-paragraph-margin-block-start, var(--_ds-typography-main-margin)) 0;
}
:is(ul, ol):not([class]) {
margin-block: var(--ds-typography-list-margin-block-start, var(--_ds-typography-main-margin)) 0;
}
li:not([class]):nth-child(n+2) {
margin-block-start: var(--ds-typography-list-item-margin-block-start, .75em);
}
:is(h1, h2, h3, h4, h5, h6):not([class]) {
/*
You will need to set a font family and line height sometimes
because they will differ from the main text
*/
margin-block: var(--ds-typography-heading-margin-block-start, 2.5em) var(--ds-typography-heading-margin-block-end, 0);
line-height: var(--ds-typography-heading-line-height, inherit);
font-family: var(--ds-typography-heading-font-family, inherit);
}
:is(h1, h2, h3, h4, h5, h6, p):not([class]):first-child,
h1:not([class]) + h2:not([class]),
h2:not([class]) + h3:not([class]),
h3:not([class]) + h4:not([class]),
h4:not([class]) + h5:not([class]),
h5:not([class]) + h6:not([class]) {
margin-block-start: 0;
}
h1:not([class]) {
font-size: var(--ds-typography-h1-font-size, 2rem);
}
h2:not([class]) {
font-size: var(--ds-typography-h2-font-size, 1.75rem);
}
h3:not([class]) {
font-size: var(--ds-typography-h3-font-size, 1.5rem);
}
h4:not([class]) {
font-size: var(--ds-typography-h4-font-size, 1.375rem);
}
h5:not([class]) {
font-size: var(--ds-typography-h5-font-size, 1.25rem);
}
h6:not([class]) {
font-size: var(--ds-typography-h6-font-size, 1.125rem);
}
a:not([class]) {
color: var(--ds-typography-link-color, #5e4ef3);
text-decoration: var(--ds-typography-link-text-decoration-line, underline)
var(--ds-typography-link-text-decoration-thickness, 2px)
var(--ds-typography-link-text-decoration-style, solid)
var(--ds-typography-link-text-decoration-color, currentColor);
text-underline-offset: var(--ds-typography-link-text-decoration-offset, 5px);
}
img{
display: var(--ds-typography-img-display, block);
max-inline-size: var(--ds-typography-img-max-width, 100%);
}
/*
=====
HELPERS
=====
*/
.is-margin {
margin: 10px;
outline: 10px solid var(--margin-area-color)
}
.is-margin-top {
box-shadow: 0 -10px 0 0 var(--margin-area-color);
}
.is-margin-bottom {
box-shadow: 0 10px 0 0 var(--margin-area-color);
}
.is-margin-left {
box-shadow: -10px 0 0 0 var(--margin-area-color);
}
.is-margin-right {
box-shadow: 10px 0 0 0 var(--margin-area-color);
}
.is-margin-left-auto {
box-shadow: -10px 0 0 0 var(--margin-area-color);
}
.is-margin-right-auto {
box-shadow: 10px 0 0 0 var(--margin-area-color);
}
.is-padding {
padding: 10px;
box-shadow: 0 0 0 10px var(--padding-area-color) inset;
}
.is-border {
border: 10px solid var(--border-area-color);
}
.parent-padding {
padding: 15px;
}
.parent-padding::before {
content: "";
box-sizing: border-box;
position: absolute;
inset: 0;
border: 15px solid var(--padding-area-color);
}
.parent-padding-vertical {
padding-block: 15px;
}
.parent-padding-vertical::before {
content: "";
box-sizing: border-box;
position: absolute;
inset: 0;
border-block: 15px solid var(--padding-area-color);
}
.parent-padding-horizontal {
padding-inline: 15px;
}
.parent-padding-horizontal::before {
content: "";
box-sizing: border-box;
position: absolute;
inset: 0;
border-inline: 15px solid var(--padding-area-color);
}
.parent-padding-top {
padding-top: 15px;
}
.parent-padding-top::before {
content: "";
box-sizing: border-box;
position: absolute;
inset: 0;
border-top: 15px solid var(--padding-area-color);
}
.parent-padding-bottom {
padding-bottom: 15px;
}
.parent-padding-bottom::before {
content: "";
box-sizing: border-box;
position: absolute;
inset: 0;
border-bottom: 15px solid var(--padding-area-color);
}
.parent-border {
border: 15px solid var(--border-area-color);
}
.parent-border-vertical {
border-block: 15px solid var(--border-area-color);
}
.parent-border-horizontal {
border-inline: 15px solid var(--border-area-color);
}
.parent-border-top {
border-top: 15px solid var(--border-area-color);
}
.parent-border-bottom {
border-bottom: 15px solid var(--border-area-color);
}
.parent-height {
block-size: 320px;
}
.margin-top-10 {
margin-top: 10px;
}
.margin-bottom-10 {
margin-bottom: 10px;
}
.margin-right-10 {
margin-right: 10px;
}
.margin-left-10 {
margin-left: 10px;
}
.margin-right-auto {
margin-right: auto;
}
.margin-left-auto {
margin-left: auto;
}
.is-margin-auto {
margin: auto;
}
.display-inline-block {
display: inline-block;
}
.display-table {
display: table;
}
.display-table-caption {
display: table-caption;
}
.display-table-cell {
display: table-cell;
}
.display-table-column {
display: table-column;
}
.display-table-column-group {
display: table-column-group;
}
.display-table-footer-group {
display: table-footer-group;
}
.display-table-header-group {
display: table-header-group;
}
.display-table-row {
display: table-row;
}
.display-table-row-group {
display: table-row-group;
}
.display-inline-table {
display: inline-table;
}
.display-grid {
display: grid;
}
.display-inline-grid {
display: inline-grid;
}
.display-inline-flex {
display: inline-flex;
}
.display-flex {
display: flex;
}
.flex-direction-row {
flex-direction: row;
}
.flex-direction-column {
flex-direction: column;
}
.justify-content-flex-start {
justify-content: flex-start;
}
.justify-content-center {
justify-content: center;
}
.justify-content-flex-end {
justify-content: flex-end;
}
.justify-content-space-between {
justify-content: space-between;
}
.justify-content-space-around {
justify-content: space-around;
}
.align-items-flex-start {
align-items: flex-start;
}
.align-items-center {
align-items: center;
}
.align-items-flex-end {
align-items: flex-end;
}
.align-items-baseline {
align-items: baseline;
}
.align-items-stretch {
align-items: stretch;
}
.align-self-flex-start {
align-self: flex-start;
}
.align-self-center {
align-self: center;
}
.align-self-flex-end {
align-self: flex-end;
}
.align-items-baseline {
align-self: baseline;
}
.align-self-stretch {
align-self: stretch;
}
.position-relative {
position: relative;
}
.position-absolute {
position: absolute;
}
.position-fixed {
position: fixed;
}
.position-static {
position: static;
}
.position-sticky {
position: sticky;
}
.top-0 {
top: 0;
}
.left-0 {
left: 0;
}
.top-10 {
top: 10px;
}
.left-10 {
left: 10px;
}
.top--10 {
top: -10px;
}
.left--10 {
left: -10px;
}
.bottom-0 {
bottom: 0;
}
.right-0 {
right: 0;
}
.bottom-10 {
bottom: 10px;
}
.right-10 {
right: 10px;
}
.bottom--10 {
bottom: -10px;
}
.right--10 {
right: -10px;
}
.overflow-auto {
overflow: auto;
}
/*
=====
TEMPLATE
=====
*/
/*
=====
RESET
=====
*/
:where(.ra-list) {
margin-block-start: var(--ra-list-margin-block-start, 0);
margin-block-end: var(--ra-list-margin-block-end, 0);
padding-inline-start: var(--ra-list-padding-inline-start, 0);
list-style: var(--ra-list-list-style, none);
}
.ra-link {
display: var(--ra-link-display, inline-flex);
}
.ra-link[href] {
color: var(--ra-link-color, inherit);
text-decoration: var(--ra-link-text-decoration, none);
}
:where(.ra-button) {
background-color: var(--ra-button-background-color, transparent);
padding: var(--ra-button-padding, var(--ra-button-padding-top, 0) var(--ra-button-padding-right, 0) var(--ra-button-padding-bottom, 0) var(--ra-button-padding-left, 0));
border: var(--ra-button-border, var(--ra-button-border-width, 0) var(--ra-button-border-style, solid) var(--ra-button-border-color, currentcolor));
font-family: var(--ra-button-font-family, inherit);
font-size: var(--ra-button-font-size, 1em);
font-weight: var(--ra-button-font-weight, inherit);
color: var(--ra-button-color, currentcolor);
text-align: var(--ra-button-text-align, center);
text-transform: var(--ra-button-text-transform, inherit);
letter-spacing: var(--ra-button-letter-spacing, inherit);
word-spacing: var(--ra-button-word-spacing, inherit);
text-shadow: var(--ra-button-text-shadow, none);
display: var(--ra-button-display, inline-flex);
}
/*
======
UIA-CONTROL
======
*/
.uia-control__group {
cursor: var(--uia-control-cursor, var(--_uia-control-cursor, pointer));
line-height: var(--uia-control-line-height, 1);
}
.uia-control {
--_uia-control-padding_default: 0;
--_uia-control-border-width: var(--uia-control-border-width);
--_uia-control-border-style: var(--uia-control-border-style, solid);
--_uia-control-border-color: var(--uia-control-border-color, currentColor);
--_uia-control-padding: var(--uia-control-padding,
var(--uia-control-padding-block-start, var(--_uia-control-padding_default))
var(--uia-control-padding-inline-end, var(--_uia-control-padding_default))
var(--uia-control-padding-block-end, var(--_uia-control-padding_default))
var(--uia-control-padding-inline-start, var(--_uia-control-padding_default))
);
--_uia-control-border: var(--_uia-control-border-width) var(--_uia-control-border-style) var(--_uia-control-border-color);
--_uia-control-border-radius: var(--uia-control-border-radius, .25rem);
}
.uia-control__group {
display: var(--uia-control-display, inline-grid);
padding: var(--_uia-control-padding);
border: var(--_uia-control-border);
border-radius: var(--_uia-control-border-radius);
background-image: linear-gradient(
var(--uia-control-background-degree, 135deg),
var(--uia-control-background-start-color, var(--uia-control-background-color))
var(--uia-control-background-start-position, 0),
var(--uia-control-background-end-color, var(--uia-control-background-color))
var(--uia-control-background-end-position, 100%)
);
}
[data-uia-control-skin="2"] .uia-control__group {
box-sizing: border-box;
min-inline-size: var(--uia-control-min-main-size, 0);
text-align: var(--uia-control-text-align, center);
}
[data-uia-control-skin="3"] {
--_uia-control-stroke-color: var(--uia-control-stroke-color, currentColor);
--_uia-control-stroke-thickness: var(--uia-control-stroke-thickness, 0);
--_uia-control-stroke-thickness-selected: var(--uia-control-stroke-thickness-selected, 2px);
}
[data-uia-control-skin="3"] .uia-control__group {
transition: box-shadow .15s ease-out;
box-shadow: inset 0 0 0 var(--_uia-control-stroke-thickness) var(--_uia-control-stroke-color);
}
[data-uia-control-skin="3"] [aria-selected="true"] {
--uia-control-border-color: var(--_uia-control-stroke-color);
--_uia-control-stroke-thickness: var(--_uia-control-stroke-thickness-selected);
}
@media (forced-colors: active) {
[data-uia-control-skin="3"] [aria-selected="true"] {
--uia-control-border-width: 5px;
block-size: calc(100% - 5px);
}
}
/*
=====
UIA-SCROLLER
=====
*/
.uia-scroller {
display: var(--uia-scroller-display, flex);
gap: var(--uia-scroller-gap, 0);
overflow: var(--uia-scroller-overflow-x, auto) var(--uia-scroller-overflow-y, auto);
-webkit-overflow-scrolling: touch;
overscroll-behavior: var(--uia-scroller-overscroll-behavior-inline, contain) var(--uia-scroller-overscroll-behavior-block, contain);
scroll-snap-type: var(--uia-scroller-scroll-snap-type, x mandatory);
}
.uia-scroller__item {
inline-size: var(--uia-scroller-item-inline-size, calc(100% / var(--uia-scroller-visible-items-number, 1)));
flex: none;
scroll-snap-align: var(--uia-scroller-scroll-snap-align, start);
}
.uia-scroller::-webkit-scrollbar {
inline-size: var(--uia-scroller-scrollbar-width);
block-size: var(--uia-scroller-scrollbar-height);
}
.uia-scroller::-webkit-scrollbar-thumb {
background-color: var(--uia-scroller-thumb-color);
}
.uia-scroller::-webkit-scrollbar-track {
background-color: var(--uia-scroller-track-color);
}
/*
=====
HELPERS
=====
*/
.ha-focus *:focus {
outline: var(--ha-outline-width, 2px) var(--ha-outline-style, solid) var(--ha-outline-color, currentColor);
outline-offset: var(--ha-outline-offset, 0);
}
.ha-screen-reader {
width: var(--ha-screen-reader-width, 1px);
height: var(--ha-screen-reader-height, 1px);
position: var(--ha-screen-reader-position, absolute);
clip-path: var(--ha-screen-reader-clip-path, rect(1px, 1px, 1px, 1px));
overflow: var(--ha-screen-reader-overflow, hidden);
white-space: var(--ha-screen-reader-white-spacw, nowrap);
}
/*
=====
CORE STYLES
=====
*/
:root {
/* color tokens */
--white: #fff;
--black: #222;
--gray-light: #f9f9fe;
--gray: #f0f0f0;
--gray-dark: #d3d1d1;
--main-color-light: #f7f1ff;
--main-color: #906aeb;
--main-color-dark: #814dff;
--warning-color-light: #ffe5e2;
--warning-color-dark: #f37667;
--accent-color-light: #fed26c;
--accent-color: #feca57;
--accent-color-dark: #fbb128;
--helping-color-light: #fff3ed;
--helping-color: #ffd3bd;
--helping-color-dark: #ffa87c;
/* gaps tokens */
--gap-2xs: .25rem;
--gap-xs: .5rem;
--gap-s: .75rem;
--gap-m: 1rem;
--gap-l: 1.25rem;
--gap-xl: 1.5rem;
--gap-2xl: 2rem;
/* border radius tokens */
--radius-s: .25rem;
--radius-m: .5rem;
--radius-l: 1.5rem;
/* typography tokens */
--font-size-s: .75rem;
--font-size-m: 1rem;
--font-size-l: 1.5rem;
--font-size-xl: 1.75rem;
--content-area-color: #c1f1e3;
--parent-area-color: #579ceb;
--padding-area-color: var(--main-color-dark);
--border-area-color: var(--accent-color-dark);
--margin-area-color: var(--accent-color);
--ds-typography-heading-font-family: Indie Flower, cursive;
--ds-typography-heading-line-height: 1.25;
--ds-typography-heading-margin-block-end: .5em;
--ds-typography-h3-font-size: var(--font-size-xl);
--ds-typography-paragraph-margin-block-start: .75em;
--tabs-control-padding: var(--gap-m) var(--gap-xl);
--tabs-control-background-color: var(--main-color-light);
--tabs-control-border-width: 3px;
--tabs-control-border-color: transparent;
--tabs-control-border-radius: var(--gap-xl);
--tabs-control-stroke-color: var(--main-color-dark);
--tabs-control-border-color-hover: var(--main-color-dark);
--remark-font-size: var(--font-size-s);
--remark-padding: var(--gap-2xs) var(--gap-m);
--remark-line-inline-size: var(--gap-2xs);
--remark-line-border-radius: var(--radius-s);
--remark-line-background-color: var(--warning-color-dark);
--infographics-gap: var(--gap-m) var(--gap-xl);
--infographics-padding: var(--gap-m) var(--gap-l);
--infographics-border: 1px solid var(--warning-color-dark);
--infographics-background-color: var(--warning-color-light);
--infographics-border-radius: var(--radius-m);
--infographics-font-size: var(--font-size-s);
--infographics-parent-padding: var(--gap-2xs) var(--gap-l) var(--gap-m);
--infographics-parent-background-color: var(--white);
--infographics-parent-border: 2px dashed var(--parent-area-color);
--infographics-parent-font-family: 'Baloo Tammudu', cursive;
--infographics-parent-font-size: var(--font-size-s);
--infographics-parent-text-parent: var(--gap-xs) var(--gap-2xs) 0;
--infographics-item-padding: var(--gap-m) var(--gap-m) var(--gap-xs);
--infographics-item-border: 2px solid var(--content-area-color);
--infographics-item-background-color: var(--content-area-color);
--demo-parent-area-color: var(--parent-area-color);
--demo-caption-font-size: var(--font-size-s);
--demo-fluid-caption-font-size: var(--font-size-s);
--demo-box-background-color: var(--content-area-color);
--demo-box-font-size: var(--font-size-s);
--demo-box-accent-color: var(--helping-color-light);
--widget-font-size: var(--font-size-s);
--widget-gap: var(--gap-s) var(--gap-l);
--widget-padding: calc(var(--gap-xl) - 1px) calc(var(--gap-l) - 1px);
--widget-border-radius: var(--radius-s);
--widget-button-padding: var(--gap-m) var(--gap-xl);
--widget-button-border-radius: var(--radius-l);
--substack-background-color: var(--helping-color-light);
--substack-button-background-color: var(--helping-color);
--substack-button-border-color: var(--helping-color-dark);
--ha-outline-color: var(--accent-color-dark);
--ha-outline-offset: 5px;
}
@media (forced-colors: active) {
:root {
--parent-area-color: var(--white);
}
}
@media (max-width: 1800px) {
:root {
font-size: 1.125rem;
}
}
@media (min-width: 1801px) {
:root {
font-size: 1.25rem;
}
}
body {
margin: 0;
background-color: var(--gray);
padding: 1rem clamp(.25rem, 1vw, 2rem);
}
.page {
/*
1. min-inline-size is defined for correct displaying of the demos with position: absolute
*/
display: grid;
min-inline-size: 21rem;
padding: var(--gap-2xl) clamp(.5rem, 5vw, 3rem);
background-color: var(--white);
box-shadow: 1px 1px 10px 1px var(--gray-dark);
border-radius: var(--radius-s);
}
.page__navigation {
--uia-control-min-main-size: 100%;
--uia-scroller-item-inline-size: fit-content;
--uia-scroller-scrollbar-height: 0;
font-size: var(--font-size-s);
overflow: hidden;
}
.page__navigation-group {
/*
1. padding is defined for reservation of space for item's outline
when it is focused. It's the best way because if we set it to
the parent that will override the padding-inline-start properly
from .ra-list. Also I don't want to create one more tag for it.
*/
padding: var(--navigation-group-outline-space, .5rem);
}
.page__navigation-button {
/*
1. The handler of pushing the navigation buttons uses
event.target. So I need to make the layer so that the
handler works on the button
*/
position: relative;
}
.page__navigation-button::before {
content: "";
position: absolute;
inset: 0;
z-index: 2;
}
.page__graphic-description {
container-type: inline-size;
container-name: inline-size-infographics-changing;
}
.page__infographics {
display: grid;
gap: var(--infographics-gap);
padding: var(--infographics-padding);
border: var(--infographics-border);
font-size: var(--infographics-font-size);
background-color: var(--infographics-background-color);
border-radius: var(--infographics-border-radius);
}
@container inline-size-infographics-changing (min-width: 560px) {
.page__infographics {
grid-template-columns: 1fr 17rem;
align-items: center;
}
}
.page__graphic {
padding: var(--infographics-parent-padding);
border: var(--infographics-parent-border);
background-color: var(--infographics-parent-background-color);
font-family: var(--infographics-parent-font-family);
font-size: var(--infographics-parent-font-size);
}
.page__graphic-parent {
display: block;
padding: var(--infographics-parent-text-parent);
}
.page__graphic-child {
display: flex;
align-items: center;
justify-content: center;
padding: var(--infographics-item-padding);
border: var(--infographics-item-border);
background-color: var(--infographics-item-background-color);
forced-color-adjust: none;
}
.page__demos {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
gap: var(--gap-2xl);
}
.page__demos:not(:first-child) {
margin-block-start: var(--gap-xl);
}
.page__demos:not(:last-child) {
margin-block-end: var(--gap-2xl);
}
.page__point {
font-family: 'Baloo Tammudu', cursive;
font-size: var(--font-size-l);
color: var(--main-color-dark);
line-height: 1;
}
.page__point::after {
content: "";
display: inline-flex;
inline-size: var(--gap-2xs);
block-size: var(--gap-2xs);
border-radius: 50%;
background-color: currentColor;
}
.page__remark {
margin-block: var(--gap-m) var(--gap-xs);
inline-size: min(100%, 75ch);
box-sizing: border-box;
font-size: var(--remark-font-size);
font-style: italic;
padding: var(--remark-padding);
position: relative;
}
.page__remark::before {
content: "";
inline-size: var(--remark-line-inline-size, 4px);
block-size: var(--remark-line-block-size, 100%);
border-radius: var(--remark-line-border-radius, 2px);
background-color: var(--remark-line-background-color, currentColor);
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
}
.page__widgets {
display: grid;
gap: var(--gap-xl);
}
.page__widgets-item {
container-type: inline-size;
container-name: inline-size-changing;
}
.page__widget {
--uia-control-min-main-size: var(--widget-button-min-inline-size, 12rem);
--uia-control-padding: var(--widget-button-padding);
--uia-control-border-width: 2px;
--uia-control-border-radius: var(--widget-button-border-radius);
box-sizing: border-box;
min-block-size: 100%;
display: grid;
gap: var(--widget-gap);
font-size: var(--widget-font-size, inherit);
background-color: var(--widget-background-color);
border: 1px solid transparent;
padding: var(--widget-padding);
border-radius: var(--widget-border-radius);
}
@container inline-size-changing (min-inline-size: 500px) {
.page__widget {
grid-template-columns: 1fr auto;
align-items: center;
}
}
.page__widget-share {
margin: auto;
}
.page__substack {
--uia-control-border-color: var(--substack-button-border-color);
--uia-control-background-color: var(--substack-button-background-color);
--widget-background-color: var(--substack-background-color);
}
@media (max-width: 1280px) {
.page {
gap: var(--gap-2xl);
}
}
@media (min-width: 981px) {
.page__navigation {
--uia-scroller-display: grid;
--uia-scroller-item-inline-size: auto;
}
.page__navigation-list {
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}
.page__navigation-button {
inline-size: 100%;
}
}
@media (min-width: 1281px) {
.page {
grid-template-columns: 70ch 1fr;
align-items: flex-start;
gap: var(--gap-xl) 3.75rem;
}
.page__navigation {
grid-column: 2;
}
.page__container {
grid-row: 1 / span 4;
}
.page__infographics {
grid-column: 2;
}
.page__widgets {
grid-column: 2;
box-sizing: border-box;
}
}
@media (min-width: 1801px) {
.page {
max-inline-size: 98rem;
display: grid;
grid-template-columns: 22rem 70ch 1fr;
align-items: flex-start;
gap: var(--gap-xl) 4rem;
}
.page__navigation {
grid-column: 1;
}
.page__infographics {
grid-column: 1;
}
.page__container {
grid-column: 2;
}
.page__widgets {
grid-column: 3;
grid-row: 1 / span 3;
}
}
/*
=====
DEMO
=====
*/
.page__demo {
display: grid;
row-gap: var(--demo-caption-gap, .5rem);
}
.page__demo-viewport {
position: relative;
forced-color-adjust: none;
}
.page__demo-viewport::after {
content: "";
box-sizing: border-box;
inline-size: 100%;
block-size: 100%;
border: 2px dashed var(--demo-parent-area-color);
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
}
.page__demo-viewport-fixed {
filter: opacity(1);
}
.page__demo-caption {
text-align: center;
font-size: var(--demo-caption-font-size);
font-style: italic;
}
.page__demo-fluid-caption {
display: block;
text-align: center;
margin-block-start: 2.25rem;
font-size: var(--demo-fluid-caption-font-size);
font-style: italic;
}
.demo-box {
background-color: var(--demo-box-background-color);
font-family: 'Baloo Tammudu', cursive;
font-size: var(--demo-box-font-size);
}
.demo-box_with-sizes {
inline-size: var(--demo-box-width, 148px);
block-size: var(--demo-box-height, 148px);
}
.demo-box_accent {
background-color: var(--demo-box-accent-color);
}
[role="tablist"] {
--uia-control-padding: var(--tabs-control-padding);
--uia-control-background-color: var(--tabs-control-background-color);
--uia-control-border-width: var(--tabs-control-border-width);
--uia-control-border-color: var(--tabs-control-border-color);
--uia-control-border-radius: var(--tabs-control-border-radius);
--uia-control-stroke-color: var(--tabs-control-stroke-color);
}
[role="tab"]:not([aria-selected="true"]):hover {
--uia-control-border-color: var(--tabs-control-border-color-hover);
}
/*
* This content is licensed according to the W3C Software License at
* https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
*/
(function () {
var tablist = document.querySelectorAll('[role="tablist"]')[0];
var tabs;
var panels;
generateArrays();
function generateArrays () {
tabs = document.querySelectorAll('[role="tab"]');
panels = document.querySelectorAll('[role="tabpanel"]');
}
// For easy reference
var keys = {
end: 35,
home: 36,
left: 37,
up: 38,
right: 39,
down: 40,
delete: 46,
enter: 13,
space: 32
};
// Add or subtract depending on key pressed
var direction = {
37: -1,
38: -1,
39: 1,
40: 1
};
// Bind listeners
for (i = 0; i < tabs.length; ++i) {
addListeners(i);
}
function addListeners (index) {
tabs[index].addEventListener('click', clickEventListener);
tabs[index].addEventListener('keydown', keydownEventListener);
tabs[index].addEventListener('keyup', keyupEventListener);
// Build an array with all tabs (<button>s) in it
tabs[index].index = index;
}
// When a tab is clicked, activateTab is fired to activate it
function clickEventListener (event) {
var tab = event.target;
activateTab(tab, false);
}
// Handle keydown on tabs
function keydownEventListener (event) {
var key = event.keyCode;
switch (key) {
case keys.end:
event.preventDefault();
// Activate last tab
focusLastTab();
break;
case keys.home:
event.preventDefault();
// Activate first tab
focusFirstTab();
break;
// Up and down are in keydown
// because we need to prevent page scroll >:)
case keys.up:
case keys.down:
determineOrientation(event);
break;
}
}
// Handle keyup on tabs
function keyupEventListener (event) {
var key = event.keyCode;
switch (key) {
case keys.left:
case keys.right:
determineOrientation(event);
break;
case keys.delete:
determineDeletable(event);
break;
case keys.enter:
case keys.space:
activateTab(event.target);
break;
}
}
// When a tablist’s aria-orientation is set to vertical,
// only up and down arrow should function.
// In all other cases only left and right arrow function.
function determineOrientation (event) {
var key = event.keyCode;
var vertical = tablist.getAttribute('aria-orientation') == 'vertical';
var proceed = false;
if (vertical) {
if (key === keys.up || key === keys.down) {
event.preventDefault();
proceed = true;
}
}
else {
if (key === keys.left || key === keys.right) {
proceed = true;
}
}
if (proceed) {
switchTabOnArrowPress(event);
}
}
// Either focus the next, previous, first, or last tab
// depending on key pressed
function switchTabOnArrowPress (event) {
var pressed = event.keyCode;
if (direction[pressed]) {
var target = event.target;
if (target.index !== undefined) {
if (tabs[target.index + direction[pressed]]) {
tabs[target.index + direction[pressed]].focus();
}
else if (pressed === keys.left || pressed === keys.up) {
focusLastTab();
}
else if (pressed === keys.right || pressed == keys.down) {
focusFirstTab();
}
}
}
}
// Activates any given tab panel
function activateTab (tab, setFocus) {
setFocus = setFocus || true;
// Deactivate all other tabs
deactivateTabs();
// Remove tabindex attribute
tab.removeAttribute('tabindex');
// Set the tab as selected
tab.setAttribute('aria-selected', 'true');
// Get the value of aria-controls (which is an ID)
var controls = tab.getAttribute('aria-controls');
// Remove is-hidden class from tab panel to make it visible
document.getElementById(controls).hidden = false;
// Set focus when required
if (setFocus) {
tab.focus();
}
}
// Deactivate all tabs and tab panels
function deactivateTabs () {
for (t = 0; t < tabs.length; t++) {
tabs[t].setAttribute('tabindex', '-1');
tabs[t].setAttribute('aria-selected', 'false');
}
for (p = 0; p < panels.length; p++) {
panels[p].hidden = true;
}
}
// Make a guess
function focusFirstTab () {
tabs[0].focus();
}
// Make a guess
function focusLastTab () {
tabs[tabs.length - 1].focus();
}
// Detect if a tab is deletable
function determineDeletable (event) {
target = event.target;
if (target.getAttribute('data-deletable') !== null) {
// Delete target tab
deleteTab(event, target);
// Update arrays related to tabs widget
generateArrays();
// Activate the closest tab to the one that was just deleted
if (target.index - 1 < 0) {
activateTab(tabs[0]);
}
else {
activateTab(tabs[target.index - 1]);
}
}
}
// Deletes a tab and its panel
function deleteTab (event) {
var target = event.target;
var panel = document.getElementById(target.getAttribute('aria-controls'));
target.parentElement.removeChild(target);
panel.parentElement.removeChild(panel);
}
// Determine whether there should be a delay
// when user navigates with the arrow keys
function determineDelay () {
var hasDelay = tablist.hasAttribute('data-delay');
var delay = 0;
if (hasDelay) {
var delayValue = tablist.getAttribute('data-delay');
if (delayValue) {
delay = delayValue;
}
else {
// If no value is specified, default to 300ms
delay = 300;
}
}
return delay;
}
}());
Also see: Tab Triggers