0

I am making a website that is basically just a long page, with 'tabs' sticking to the top beneath each other as tabs as you scroll down. This all works fine, except for the last two 'tabs', they are supposed to go over the previous ones (instead of stop). The text div that go after them (#arttext5 and #arttext6) will go under the sticky tabs that are already there. I gave everything the right z-indexes and positions. And tried wrapping them in a div, but no good. Sometimes it works, they go over the rest, and sometimes they don't. Mostly #arttext5 works but #arttext6 doesn't. On mobile they almost never work. Can anyone see what I'm doing wrong? Basically the structure looks like this:

<html> 
<head>…</head>
<body>
<div class=“language”>…</div>
<div class=“languageMOB”>…</div>
<div class=“taalMOB”>…</div>
<div class=“wrapper”>
    <div class=“tabs” id=“tab1”>…</div>
    <div id=“anchorpub></div>
    <p class=“arttext” id=“arttext1>…</p>
    <p class=“datum”>05/08-12/09/2021</p>
    <p></p>
    <a href="https://datumprikker.nl/event/attendance/puxpdz9yfewyd4di" target="_blank"><p class="bookENG"></p></a>
    <div class="tabs" id="tab2”>…</div>
    <div id="anchorcaglar"></div>
    <p class="arttext" id="arttext2”>…</p>
    <div class="tabs" id="tab3”></div>
    <div id="anchorilke"></div>
    <p class="arttext" id="arttext3”>…</p>
    <div class="tabs" id="tab4”>…</div>
    <div id="anchorFalke"></div>
    <p class="arttext" id="arttext4”>…</p>
    <div class="tabs" id="tab5”>…</div>
    <div id="anchorPSR"></div>
    <div id="pubtext">
        <p class="arttext" id="arttext5”>…</p>
    </div>
    <div class="tabs" id="tab6”>…</div>
    <div id=“coltext”>
        <p class="arttext" id="arttext6”>…</p>
        <div class="logos”>…</div>
    </div>
</div>  
<script>…</script>
</body>
</html>

This is the site: https://publiciteitrotterdam.com/

C.B
  • 13
  • 4
  • It's because they are in a different [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context) - the others are all siblings whereas the ones that "don't work" are children of a div so they are not in the same context as the ones that work – Pete Aug 06 '21 at 09:37
  • I've put them all in the same stacking context now, they are all siblings. But it still has the same problem. – C.B Aug 06 '21 at 09:56
  • Then you need to create a [mcve] in the question so we can see what's wrong - please read [something on my website doesn't work, can I just paste a link to it?](https://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste-a-link-to-it) – Pete Aug 06 '21 at 10:06

0 Answers0