sticky-headers and sortable columns seem to be mutually exclusive.

[PDXfoster]

Describe the bug

Sticky-header and sortable columns seem to be incompatible. When I add the "sortable" property to a field, the class "position-relative" is added to the , which overrides the sticky header. Playing around, if I set sortable on a field, go into dev tools, and simply remove the "position-relative" class, sort works, and the header is sticky. I'm not sure why this class is being added with sortable, but on the surface, it seems like it shouldn't be.

Steps to reproduce the bug

1. Go to https://codepen.io/PDXfoster/pen/WNKVrBz - view both sticky header, and sortable implementation
2. Scroll
3. See header is NOT sticky
4. See that sort works
5. Go to https://codepen.io/PDXfoster/pen/poZMgMx - view just sticky header implementation
6. Scroll
7. See header IS sticky
8. See that sort does not work

Expected behavior

I would expect that these two features are not mutually exclusive, so I can have both sticky headers, and sortable columns

Versions

Libraries:

• BootstrapVue: 2.23.0
• Bootstrap: 4.6.0
• Vue: 2.6.14

Environment:

• Device: Mac
• OS: macOS 13.2
• Browser: Vivaldi
• Version: 5.6.2867.62

Additional context

Add any other context about the bug here.

[PDXfoster]

It looks like @m-mohr did some work for #7023 to take care of issue #6961, but it seems like that didn't quite fix it. It looks like adding another carve-out for sticky-header might take care of things - something along the lines of:
'position-relative': sortLabel && !stickyColumn && !stickyHeader.

I'm not sure what the overflow problem is that this code block is addressing, so it's hard to understand if there are any unintended consequences to adding an extra carve-out, but when I simply remove the position-relative class from the element, the <span class="sr-only"> (Click to sort descending)</span> element is still there, and doesn't seem to interfere with anything - which begs the question - is this block really needed? It's difficult to troubleshoot why this is being applied, and not presently possible to override if it's causing problems. Usually Screen Readers respect hierarchy, and an sr-only element should be hidden, so I'm not sure why relative position would be needed at all, but maybe I'm missing something.

https://github.com/bootstrap-vue/bootstrap-vue/blame/9e8dbbb841aecbe20d1f6555d0d953dcfbec862c/src/components/table/helpers/mixin-thead.js

I attempted to use the solution listed in the other ticket:

 .b-table-sticky-header>.table.b-table>thead>tr>th 
  {
    position: sticky !important;
  }

I ran into some problems, because I imported the bootstrap-vue package into the base project for use everywhere, but was using scoped style sheets in my vue components (to avoid unintended style changes in a large project) so the override css wasn't applying to the components imported in the base project. I've turned off scoping, and that's working as a bandaid for now, but it seems like this may need another look. Not quite sure the best way to get spun up quickly with the project, or I'd open a PR, but let me know if that's what's needed.

Thanks!

[stephanestermann]

I can confirm this bug.
Version used: "bootstrap-vue": "2.23.1",
As soon as a column is "sortable: true", "sticky-header" no longer works. I suspect that this problem occurs since version 2.23.x. It worked in previous versions.