Bootstrap——相互替换的“sticky-top”元素

Question

on the Bootstrap Cheatsheet page , two things are happening:

(1) the elements on the left of the page are respecting the header as the top, and sticking to the bottom of the header, and

(2) the elements on the left-hand side of the page are replacing each other, and "bumping each other off the top," as sticky-top elements.

How are they doing this? I have been picking apart the html of that page to try to figure it out, but think that I must just be missing something. When I try to have multiple "sticky-top" elements, the multiple sticky-top elements stack on top of each other, all piled together at the top of the page, without "bumping" the previous sticky-top element upward.

Also, each h2 has children divs, and the children divs are bumping each other off as sticky-top elements, while each h2 bumps the previous h2 off as the previous sticky-top element, if you could let me know why that is happening. I would really appreciate any help anyone can give. Thanks

Answer 1

Look at the outermost container around each section. It's an article element, and it constrains the position of the sidebar headings inside. Those headings are allowed to be at any position, top to bottom, within those containers. It actually has nothing to do with the header.

Picture a kitchen cabinet drawer in your mind. Open it and place a tall glass at the back corner. Now close the drawer. The glass can slide along the drawer's floor, constrained by the counter top, until the bottom of the drawer makes contact. At that point the glass gets forcefully pulled under the countertop. That's essentially what's happening with this layout.

As far as everything respecting the header, inspect the primary layout. It uses CSS grid (via Bootstrap classes), and there's a 4rem top padding applied, which corresponds to the header height.