Tabs with type='bottom' not sticking to the bottom

Page layout & navigation
1

So, as far as I understand it, giving a tab control type=‘bottom’ should force the tabs to stick to the bottom of the screen, should it not?

In my case it’s not doing that at all. The tab control stays wherever I put it in the DOM and scrolls up and down, out of sight, along with all the other content. What am I doing wrong?

  $('#tabs').mobiscroll4().nav({
      theme: 'auto',
      type: 'bottom',
      layout: 'fixed',
      themeVariant: 'light',
      onItemTap: function (event, inst) {
          setActiveTab($(event.target).attr('data-tab'));
          pageTitle(ucFirst($(event.target).attr('data-tab')),$('#staffname').val());
      },
      onInit: function (event, inst) {
        setActiveTab('<?=$activetab?>');
        pageTitle('<?=ucfirst($activetab)?>','<?=$staffname?>');
        inst.select('<?=$activetab?>');
      }
  });

I’m using version 4.10.9

2

So, it turns out, the reason my tabs are not sticking to the bottom is because I have the following line in my css override.

.mbsc-ms-top.mbsc-ms-c, .mbsc-ms-bottom.mbsc-ms-c {position:initial !important}

I don’t know why I have that, but I’ll remove it for now. Hopefully it’s not important (even though it literally says !important).