タブメニューをfixedで固定すると重なったりずれたりしてしまう

前提・実現したいこと

横並び中央揃えのタブメニューを、スクロールでfixed固定したいと思っています。
固定自体はできたのですが、タブメニューが重なって一つに見えたり（FirefoxやChrome）逆にばらけたり（IE）して、想定通りの表示になりません。
（fixed固定したいだけで、タブのレイアウト自体はスクロール前後問わず同じにしたいのです）
どうすれば崩れがなくなるでしょうか？

該当のソースコード

HTML
1<div class="tab-wrap">
2<input id="tab01" type="radio" name="tab" class="tab-switch" checked="checked"><label class="tab-label" for="tab01">ボックス1</label>
3<div class="tab-content">
4<!-- BOX -->
5<div class="box">
6<p>あいうえお</p>
7<p>あいうえお</p>
8<p>あいうえお</p>
9<p>あいうえお</p>
10<p>あいうえお</p>
11<p>あいうえお</p>
12<p>あいうえお</p>
13<p>あいうえお</p>
14<p>あいうえお</p>
15<p>あいうえお</p>
16<p>あいうえお</p>
17<p>あいうえお</p>
18</div>
19<!-- BOX END-->
20</div>
21<input id="tab02" type="radio" name="tab" class="tab-switch"><label class="tab-label" for="tab02">ボックス2</label>
22<div class="tab-content">
23<!-- BOX -->
24<div class="box">
25<p>かきくけこ</p>
26<p>かきくけこ</p>
27<p>かきくけこ</p>
28<p>かきくけこ</p>
29<p>かきくけこ</p>
30<p>かきくけこ</p>
31<p>かきくけこ</p>
32<p>かきくけこ</p>
33<p>かきくけこ</p>
34<p>かきくけこ</p>
35<p>かきくけこ</p>
36<p>かきくけこ</p>
37</div>
38<!-- BOX END-->
39</div>
40<input id="tab03" type="radio" name="tab" class="tab-switch"><label class="tab-label" for="tab03">ボックス3</label>
41<div class="tab-content">
42<!-- BOX -->
43<div class="box">
44<p>さしすせそ</p>
45<p>さしすせそ</p>
46<p>さしすせそ</p>
47<p>さしすせそ</p>
48<p>さしすせそ</p>
49<p>さしすせそ</p>
50<p>さしすせそ</p>
51<p>さしすせそ</p>
52<p>さしすせそ</p>
53</div>
54<!-- BOX END-->
55</div>
56</div>

css
1body {
2  min-height: 1200px; /* スクロールでの表示確認のために追加 */
3}
4.tab-wrap {
5  display: flex;
6  flex-wrap: wrap;
7  margin: 30px 0 20px 0;
8  justify-content: center;
9}
10.tab-label {
11  position: relative;
12  display: block;
13  float: left;
14  width: calc(100%/8 - 10px * 2);
15  color: #000;
16  background: #ccc;
17  white-space: nowrap;
18  text-align: center;
19  order: -1;
20  z-index: 1;
21}
22.tab-label:not(:last-of-type) {
23  margin-right: 5px;
24}
25.tab-content {
26  display: flex;
27  flex-wrap: wrap;
28  margin: 10px 0 0 0;
29  justify-content: center !important;
30  width: 100%;
31  height: 0;
32  overflow: hidden;
33  opacity: 0;
34}
35.tab-switch:checked+.tab-label {
36  background: #000;
37  color: #fff;
38}
39.tab-switch:checked+.tab-label+.tab-content {
40  height: auto;
41  overflow: auto;
42  padding: 15px;
43  opacity: 1;
44  transition: .5s opacity;
45}
46.tab-switch {
47  display: none;
48}
49.is-fixed {
50    position: fixed !important;
51    top: 0;
52    z-index: 2;
53}

script
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
2<script>
3  $(function() {
4    var $win = $(window),
5        $main = $('.tab-content'),
6        $nav = $('.tab-label'),
7        navHeight = $nav.outerHeight(),
8        navPos = $nav.offset().top,
9        fixedClass = 'is-fixed';
10
11    $win.on('load scroll', function() {
12      var value = $(this).scrollTop();
13      if ( value > navPos ) {
14        $nav.addClass(fixedClass);
15        $main.css('margin-top', navHeight);
16      } else {
17        $nav.removeClass(fixedClass);
18        $main.css('margin-top', '0');
19      }
20    });
21  });
22</script>

試したこと

position: relative;が消えたのがまずいのかと大枠の「tab-wrap」に追記したが変化なし。
横並びの記述を変更しようとタブのinputを一か所にまとめようとしたが、そうするとタブの中身が表示されなくなってしまう。
追記：
IEの件はベンダープレフィックスを入れてみましたがだめでした。

yambejp

2020/09/07 04:51

「Java」タグは必要ですか？「javascript」や「jQuery」ですか？

mupo

2020/09/07 04:53

すみません。修正しました。

行動規範の内容に同意します

回答1件

ベストアンサー

position: fixedを設定したら通常フローから外れるので display: flex; も効かなくなります。

下記のCSSを追加したらどうでしょうか。

css
1.is-fixed:nth-child(2) {
2  transform: translatex(calc(-100% - 5px));
3}
4.is-fixed:nth-child(8) {
5  transform: translatex(calc(100% + 3px));
6}