如何在HTML和CSS中实现具有可折叠组件的粘性划分？

Question

I am trying to merge the "div" tag containing the a "p" tag, a collapsible button with the HTML table header such that when the user scrolls all the components above the HTML table body data will stick to the top which is working. The issue is when I am expanding the collapsible button it overlaps the whole table instead of shifting it down. May be the issue is due to z-axis. But I want everything to stick on the top position and avoid overlapping of the expansion area. Any help would is appreciated.

 var coll = document.getElementsByClassName("collapsible"); var i; for (i = 0; i < coll.length; i++) { coll[i].addEventListener("click", function() { this.classList.toggle("active"); var content = this.nextElementSibling; if (content.style.display === "block") { content.style.display = "none"; } else { content.style.display = "block"; } }); } 

 .stickyDiv { position: -webkit-sticky; position: sticky; z-index: 99; top: -1px; background-color: #DDD; border: initial; } table.floatThead-table { border-top: none; border-bottom: none; background-color: #fff; } th { position: -webkit-sticky; position: sticky; top: 120px; background-color: #0B2D71; color:#fff; } .collapsible { background-color: #777; color: white; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; } .active, .collapsible:hover { background-color: #555; } .content { padding: 0 18px; display: none; overflow: hidden; background-color: #f1f1f1; } 

 <h1>Sticky Collapsible</h1> <div class='stickyDiv'> <p> Lorem Ipsum.............</p> <button class="collapsible">Open Collapsible</button> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </div> <div> <table id="tbl"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Points</th> </tr> </thead> <tbody> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr><tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr><tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr><tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr><tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr><tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr><tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr><tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr><tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr><tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr><tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </tbody> </table> </div> 

Answer 1

Rather than manipulating an element's style attribute:

content.style.display === 'block';

It's definitely better practice to add and remove classes:

content.classList.add('block');
content.classList.remove('block');

You can then style the class in your stylesheet:

.block {
  display: block;
}

But you can also influence immediately subsequent siblings:

.block + .my-sibling {
  [STYLES HERE]
}

and any other siblings further on:

.block ~ .my-sibling {
  [STYLES HERE]
}