How to make position sticky work with this structure? - html

Question

I imagine CSS looks out of place in my example but these styles are added by library, particularily styles in #top, #middle, #bottom. I need .header elements to stick to top.
I've tried all kinds of styles but no luck. Feel free to overwrite or add any styles. How to make this work with the HTML structure I have?
#top {
display: flex;
position: relative;
z-index: 0;
overflow: hidden !important;
max-height: 300px;
max-width: 300px;
border: 2px dashed #ec6161;
}
#middle {
padding-right: 19px;
margin-bottom: -34px;
overflow: scroll;
overflow-x: hidden !important;
min-width: 100%! important;
max-height: inherit !important;
box-sizing: content-box !important;
}
#bottom {
padding-bottom: 17px;
margin-right: -19px;
overflow: scroll;
overflow-y: hidden !important;
box-sizing: border-box !important;
min-height: 100% !important;
}
.header {
position: sticky;
top: 0;
z-index: 1;
background: #eee;
padding: 5px 7px;
font-weight: bold;
}
.content {
height: 100px;
padding: 5px 7px;
}
<div id="top">
<div id ="middle">
<div id="bottom">
<div>
<div>
<div class="header">Header</div>
<div class="content">Content</div>
</div>
<div>
<div class="header">Header</div>
<div class="content">Content</div>
</div>
<div>
<div class="header">Header</div>
<div class="content">Content</div>
</div>
<div>
<div class="header">Header</div>
<div class="content">Content</div>
</div>
<div>
<div class="header">Header</div>
<div class="content">Content</div>
</div>
</div>
</div>
</div>
</div>
Also: https://jsfiddle.net/bkn0e3gL/2/

Answer 1

Setting overflow: hidden on any parent divs seems to be causing the problem.
Check out this answer:
if you set overflow to hidden on any ancestor of your sticky element, then this ancestor element will be the scrolling container for your sticky element.
.header {
background: #B8C1C8;
border-bottom: 1px solid #989EA4;
border-top: 1px solid #717D85;
color: #FFF;
position: -webkit-sticky;
position: sticky;
top: -1px;
}
.content {
min-height: 200px;
}
#bottom {
padding-bottom: 17px;
margin-right: -19px; //overflow: scroll;
//overflow-y: hidden !important;
box-sizing: border-box !important;
min-height: 100% !important;
}
#middle {
padding-right: 19px;
margin-bottom: -34px; //overflow: scroll;
//overflow-x: hidden !important;
min-width: 100% ! important;
max-height: inherit !important;
box-sizing: content-box !important;
}
#top {
display: flex;
position: relative;
z-index: 0;
//overflow: hidden !important;
max-height: 300px;
max-width: 300px;
border: 2px dashed #ec6161;
}
<div id="top">
<div id="middle">
<div id="bottom">
<div>
<div>
<div class="header">Header</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque viverra.</div>
</div>
<div>
<div class="header">Header</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque viverra.</div>
</div>
<div>
<div class="header">Header</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque viverra.</div>
</div>
<div>
<div class="header">Header</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque viverra.</div>
</div>
</div>
</div>
</div>
</div>