<h2 id="heading-example">Example</h2>
<div class="embed-wrapper"><div class="embed-loading"><div class="loadingRow"></div><div class="loadingRow"></div></div><a class="embed-card" href="https://codepen.io/bada3670/pen/WNzZRBe">https://codepen.io/bada3670/pen/WNzZRBe</a></div>
<p>Let me use this example to explain.</p>
<h2 id="heading-the-standard-may-not-be-body">The Standard May Not Be 'body'.</h2>
<p>The nearest ancestor which has scrolling function is the standard.</p>
<p>In the above example, the green box is the standard.</p>
<h2 id="heading-the-item-cannot-be-out-of-its-ancestor-even-though-sticky-is-applied">The Item Cannot Be out of Its Ancestor, Even Though 'sticky' Is Applied.</h2>
<p>Even though the purple part is sticky, it disappears as its ancestor, which is the orange part, goes up.</p>


## Example

%[https://codepen.io/bada3670/pen/WNzZRBe]

Let me use this example to explain.

## The Standard May Not Be 'body'.

The nearest ancestor which has scrolling function is the standard.

In the above example, the green box is the standard.

## The Item Cannot Be out of Its Ancestor, Even Though 'sticky' Is Applied.

Even though the purple part is sticky, it disappears as its ancestor, which is the orange part, goes up.

examplist

examplist

"position: sticky": Tricky Parts

Example

The Standard May Not Be 'body'.

The Item Cannot Be out of Its Ancestor, Even Though 'sticky' Is Applied.