pure CSS multiple stacked position sticky?
You need to make all the elements to stick to the same container (containing block) by adding some offsets.
Here is a basic example where the elements will stick to the body:
body { margin:0; min-height:200vh; border:2px solid;}.first { height:50px; background:red; position:sticky; top:0;}
.second { height:50px; background:blue; position:sticky; top:52px;}.third { height:50px; background:green; position:sticky; top:104px;}<div class="first"></div><p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p><div class="second"></div><p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p><div class="third"></div><p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>pure css stacking of position sticky without knowing component count
If the question is Can I use the
nofnth-childornth-of-typeto calculate attributes automatically?The answer is No, you can't, at least for now.
But there are several workarounds:
- This one is not very elegant, but it's actually the most used one so far.
.bars span {
display: block;
height: 1em;
margin-bottom: 1em;
background-color: salmon;
}
.bars span:nth-child(1) {
width: 1em;
}
.bars span:nth-child(2) {
width: 2em;
}
.bars span:nth-child(3) {
width: 3em;
}
.bars span:nth-child(4) {
width: 4em;
}
// ... and many more<div class="bars">
<span></span>
<span></span>
<span></span>
<span></span>
</div>Problem with multiple sticky element in html-css
You need to create a container for each day set as position:relative for the sticky elements to anchor to.
.sticky-contain{ position: relative;}
body { font-size: 1em; user-select: none; background-color: #e0e0e0; font-family: sans-serif; font-size: 100%; } /* multiple sticky element css --STARTS*/ .info{ position:sticky; top:0; } /* multiple sticky element css _______ENDS*/ main { width: 50%; min-width: 550px; margin: 0 auto; background-color: #e0e0e0; height: 300px; overflow-y: scroll; }
#wrap { padding: 5px; display: grid; grid-gap: 2px; position: relative; z-index: 1; }
#wrap .right_wrap { width: 80%; padding-left: 20%; display: flex; justify-content: flex-end; }
#wrap .left_wrap { display: flex; justify-content: flex-start; width: 80%; }
.right_wrap .sms_section { background-color: #dbf4c6; border-radius: 7.5px; padding: 6px 7px 8px 9px; }
.left_wrap .sms_section { background-color: #f4f4f4; border-radius: 7.5px; padding: 6px 7px 8px 9px; }
.sms_section { display: grid; grid-template-columns: 1fr 48px; }
.left_time, .right_time { grid-column: 2/3; grid-row: 2; margin-top: -6px; }
#inpt { position: sticky; bottom: 0; text-align: left; background-color: #d0d0d0; padding: 5px 0 5px 5px; box-shadow: 0 0 20px -11px; }
input[type='text'] { font-size: 16px; width: 80%; border-radius: 2px; border: none; padding: 5px;
}<body> <main> <section id="wrap"> <div class="sticky-contain"> <div class="info"><span>March 1 2020</span></div>
<div class="left_wrap"> <section class="sms_section"> <div class="left_sms">left message left message left message left message left message message messagemessage message messagemessage message messagemessage message messagemessage message messagemessage message messagemessage message messagemessage message messagejkjkjk kjkjkjjkk kjijiji kjkjkjkjkjkjkjkjkjkjkjkjjjkj kjkjkjkjkkkjkjkj </div> <span class="left_time"> <code>4.06AM</code> </span> </section> <!--.sms_section--> </div> </div> <div class="sticky-contain">
<div class="info"><span>March 2 2020</span></div> <div class="left_wrap"> <section class="sms_section"> <div class="left_sms">left message left message left message left message left message</div> <span class="left_time"><code>4.06AM</code></span> </section> </div>
<div class="right_wrap"> <section class="sms_section"> <div class="right_sms">left message left message left message left message left message left message left message left message left message left message</div> <span class="right_time"><code>4.06AM</code></span> </section> </div>
<div class="left_wrap"> <section class="sms_section"> <div class="left_sms">left message left message left message left message left message</div> <span class="left_time"><code>4.06AM</code></span> </section> </div> </div> <div class="sticky-contain">
<div class="info"><span>Yesterday</span></div>
<div class="right_wrap"> <section class="sms_section"> <div class="right_sms">left message left message left message left message left message</div> <span class="right_time"><code>4.06AM</code></span> </section> </div> <div class="right_wrap"> <section class="sms_section"> <div class="right_sms">left message left message left message left message left message</div> <span class="right_time"><code>4.06AM</code></span> </section> </div> <div class="right_wrap"> <section class="sms_section"> <div class="right_sms">left message left message left message left message left message</div> <span class="right_time"><code>4.06AM</code></span> </section> </div> <div class="right_wrap"> <section class="sms_section"> <div class="right_sms">left message left message left message left message left message</div> <span class="right_time"><code>4.06AM</code></span> </section> </div>
<div class="right_wrap"> <section class="sms_section"> <div class="right_sms">left message left message left message left message left message</div> <span class="right_time"><code>4.06AM</code></span> </section> </div> </div> <div id="inpt"> <input type="text" placeholder="type here">
</div>
</section> </main>
</body>How to prevent two sticky div elements from overlapping?
So I figured it out:
Getting 2 Divs to Stick, w/o Covering One Another
There are two ways you can configure the Sticky <div> elements so that they don't cover each other when you scroll down the page.
#1
The first way is to set the property top of the lower div, to be the same combined height as the top div. The key word here is COMBINED which means: The padding and borders need to be added to the height to get an accurate value for top, otherwise the divs will still partially cover one another.
#2
The most simple, straight forward method, would be to create a parent div that is sticky, and then place the two original divs inside of it. Remove the position: sticky; property from the original two <div> elements, so that position sill be set to its default value. Its important that when doing this, you make sure that only the parent container has its position property set to sticky (i.e. position: sticky), or else you'll get undesired results. Below is the questions code rewritten using solution #2.
<!DOCTYPE html>
<html>
<head>
<style>
.div-alpha {
display: block;
text-align: center;
width: 200px;
height: 200px;
font-size: 30px;
text-decoration: underline;
border: 5px solid #08C8FF;
background-color: #900040;
color: #08C8FF;
}
.div-beta {
display: block;
text-align: center;
width: 200px;
height: 200px;
font-size: 30px;
text-decoration: underline;
border: 5px solid #EE1054;
background-color: #00307A;
color: #EE1054;
}
.div-gamma {
display: block;
text-align: center;
position: sticky;
top: 0;
}
p {
width: 350px;
font-size: 18px;
}
</style>
</head>
<body>
<h1>Testing Sticky Divs</h1>
---
<br>
<div class="div-gamma">
<div class="div-alpha">DIV ALPHA</div>
<div class="div-beta">DIV BETA</div>
</div>
<br>
<br>
<br>
<br>
<h3>Lorem Ipsum Text</h3>
---
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Mi ipsum faucibus vitae aliquet nec. Tempus quam pellentesque nec nam aliquam. Purus non enim
praesent elementum facilisis leo vel fringilla est. Mattis ullamcorper velit sed ullamcorper morbi tincidunt. Eu
consequat ac felis donec et odio pellentesque. In ante metus dictum at tempor commodo. Amet massa vitae tortor
condimentum. Sapien eget mi proin sed libero enim sed faucibus turpis. Tortor at risus viverra adipiscing at.
Leo urna molestie at elementum eu facilisis sed. Pharetra diam sit amet nisl suscipit adipiscing. Cursus sit
amet dictum sit amet justo donec. Euismod nisi porta lorem mollis. Massa ultricies mi quis hendrerit. Lorem
ipsum dolor sit amet consectetur. Facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum dui.
Mi in nulla posuere sollicitudin aliquam ultrices sagittis. Ornare arcu odio ut sem nulla pharetra. Faucibus et
molestie ac feugiat sed lectus. Commodo quis imperdiet massa tincidunt nunc. At augue eget arcu dictum varius
duis. Potenti nullam ac tortor vitae purus faucibus ornare suspendisse sed. Et molestie ac feugiat sed lectus
vestibulum mattis ullamcorper. Convallis posuere morbi leo urna molestie at. Enim sit amet venenatis urna cursus
eget nunc scelerisque viverra. Tristique senectus et netus et malesuada fames ac. Faucibus ornare suspendisse
sed nisi lacus sed viverra tellus. Ut aliquam purus sit amet luctus venenatis lectus. Posuere urna nec tincidunt
praesent. Aenean et tortor at risus viverra adipiscing at in. Justo eget magna fermentum iaculis eu. Placerat
vestibulum lectus mauris ultrices eros in.
Pharetra vel turpis nunc eget lorem dolor. Blandit turpis cursus in hac habitasse platea dictumst quisque. Nisi
porta lorem mollis aliquam ut porttitor leo. Lectus nulla at volutpat diam ut venenatis. Proin nibh nisl
condimentum id venenatis. Arcu felis bibendum ut tristique et egestas quis ipsum. Feugiat nibh sed pulvinar
proin gravida. Odio facilisis mauris sit amet. Gravida in fermentum et sollicitudin ac. Magna etiam tempor orci
eu lobortis elementum nibh. Donec ultrices tincidunt arcu non sodales. Consequat ac felis donec et odio. Amet
mattis vulputate enim nulla aliquet porttitor lacus luctus. Sagittis purus sit amet volutpat consequat mauris
nunc. Id interdum velit laoreet id donec ultrices tincidunt arcu non. Diam sit amet nisl suscipit. Viverra
tellus in hac habitasse platea dictumst vestibulum. Praesent tristique magna sit amet purus gravida.
</p>
</body>
</html>Related Topics
Using Font Awesome Icon for Bullet Points, with a Single List Item Element
Changing Jsf Prefix to Suffix Mapping Forces Me to Reapply the Mapping on CSS Background Images
Newline Character Sequence in CSS 'Content' Property
Remove All Padding and Margin Table HTML and CSS
How to Colour Backgrounds of Selected Items in HTML Select Options with CSS Only
Hide Up & Down Arrow Buttons (Spinner) in Input Number - Firefox 29
Is It Bad Practice to Comment Out Single Lines of CSS with //
Starting Shiny App After Password Input (With Shinydashboard)
What Are the Rules Around Whitespace in Attribute Selectors
Select Inputs and Text Inputs in HTML - Best Way to Make Equal Width
Overlay a Background-Image with an Rgba Background-Color
Difference Between Body and * in CSS
How to Select the Last N Items with Nth-Child
Css: Are View Height (Vh) and View Width (Vw) Units Widely Supported
Twitter Bootstrap: Div in Container with 100% Height
How to Use CSS to Position a Fixed Variable Height Header and a Scrollable Content Box