<div class="scrollport container">
I'm just a scrolling container.
<div class="fixed-position">I'm completely off the page and do not contribute to the scrollable size of my parent. My margin doesn't do anything.</div>
</div>
<div class="contains-layout container">
I'm just a layout container.
<div class="fixed-position">I'm visible outside my parent and do not contribute to the scrollable size of my parent. My margin doesn't do anything.</div>
</div>
<div class="scrollport contains-layout container">
I'm a layout container with <code>overflow-y: auto.</code>
<div class="fixed-position">I'm visible inside my parent and contribute to the scrollable size of my parent. My margin doesn't do anything.</div>
</div>
<style>
.scrollport {
overflow-y: auto;
}
.fixed-position {
position: fixed;
top: 100%;
}
.contains-layout {
contain: layout;
}
div {
outline: 1px solid red;
margin-bottom: 2rem;
}
.container {
height: 5rem;
}
</style>
<div class="scrollport container">
I'm just a scrolling container.
<div class="fixed-position">I'm completely off the page and do not contribute to the scrollable size of my parent. My margin doesn't do anything.</div>
</div>
<div class="contains-layout container">
I'm just a layout container.
<div class="fixed-position">I'm visible outside my parent and do not contribute to the scrollable size of my parent. My margin doesn't do anything.</div>
</div>
<div class="scrollport contains-layout container">
I'm a layout container with <code>overflow-y: auto.</code>
<div class="fixed-position">I'm visible inside my parent and contribute to the scrollable size of my parent. My margin doesn't do anything.</div>
</div>
<style>
.scrollport {
overflow-y: auto;
}
.fixed-position {
position: fixed;
top: 100%;
}
.contains-layout {
contain: layout;
}
div {
outline: 1px solid red;
margin-bottom: 2rem;
}
.container {
height: 5rem;
}
</style>