Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

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.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

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.

+ add another resource

Packages

Add Packages

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.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <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>

              
            
!

CSS

              
                @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);
}
              
            
!

JS

              
                /*
*   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;
  }
}());
              
            
!
999px

Console