Jquery 全屏覆盖中的定位问题

我想要一个全屏的div覆盖按钮点击。它在初始状态下运行良好，但当我们更改选项卡并再次单击按钮返回时，它会被限制在具有相对定位的div中，并且不会在全屏显示。嗯，我试着在点击按钮时取消那个div的位置，但它不起作用。我可能做错了什么。任何帮助都将不胜感激

$（'.seemore'）。单击（函数（）{
$（this）.parents（'.scroller__item'）。next（'.overlay'）。toggleClass（'opened'）；
})
$（'.closebtn'）。单击（函数（）{
$（this.parent（）.removeClass（'opened'）；
})
函数垂直_选项卡（）{
如果（$（“.ux垂直制表符”）.length>0）{
$（“.ux垂直制表符.制表符按钮”）。打开（“单击”，函数（）{
var temp_tab=$（此）.data（“tab”）；
var temp_tab_js=this.getAttribute（“数据选项卡”）；
var temp_内容=$(
'.ux垂直选项卡.maincontent.tabcontent[data tab=“”+
临时选项卡+
'"]'
);
var temp_content_js=document.querySelector(
'.ux垂直选项卡.maincontent.tabcontent[data tab=“”+
临时选项卡+
'"]'
);
var temp\u content\u active\u js=document.querySelector(
“.ux垂直选项卡.maincontent.tabcontent.active”
);
$（“.ux垂直选项卡.选项卡按钮”）.removeClass（“活动”）；
$（'.ux垂直制表符.tabs按钮[data tab=“'+temp_tab+'']”）addClass(
“活动”
);
var animation_start=动画({
持续时间：400，
目标：临时内容活动，
不透明度：[1,0]，
translateX:[0，“100%”，
放松：“放松”，
完成：函数（）{
$（“.ux vertical tabs.maincontent.tabcontent”）.removeClass（“活动”）；
临时内容添加类（“活动”）；
var animation_end=动画({
持续时间：400，
目标：临时内容，
不透明度：[0,1]，
translateX:[“100%”，0”]，
放松：“放松”
});
}
});
});
}
}
$（函数（）{
垂直标签（）；
});
.tabs{
显示：表格；
}
.ux垂直选项卡{
位置：相对位置；
}
.ux垂直选项卡。选项卡{
-webkit转换：translateY（0px）；
变换：translateY（0px）；
}
.ux垂直选项卡.选项卡按钮{
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
背景：#fff；
填充：1.2rem；
/*宽度：100%*/
大纲：无；
文本对齐：左对齐；
光标：指针；
边界：无；
盒影：0 0 3px#ccc；
/*字体大小：.85rem*/
颜色：#666；
文本转换：大写；
过渡：背景250ms；
浮动：左；
}
.ux垂直选项卡。选项卡按钮：第一个子级{
边框顶部：1px实心#ddd；
}
.ux垂直选项卡。选项卡按钮：悬停{
背景：edf0d0；
}
.ux垂直选项卡。选项卡按钮。活动{
背景#00a651；
右边界：0；
颜色：#fff；
}
.ux垂直选项卡。选项卡按钮跨度{
宽度：0；
身高：0；
边框顶部：6px实心透明；
边框底部：6px实心透明；
左边框：6px实心#ccc；
转化：translateX（1rem）；
不透明度：0；
过渡：所有350ms缓解；
显示：内联块；
}
.ux垂直选项卡.maincontent{
弹性：1；
盒影：0 0 3px#ccc；
填充：2rem；
溢出：隐藏；
}
.ux垂直选项卡.maincontent.tabcontent{
显示：无；
}
.ux垂直选项卡.maincontent.tabcontent.active{
显示器：flex；
弹性：1；
位置：相对位置；
}
巴顿，再见{
背景：#5cb85c；
颜色：#fff；
边界：无；
填充：10px；
边界半径：9px 30px；
字体大小：12px；
}
蒂米先生{
位置：相对位置；
}
.团队布局{
位置：相对位置；
溢出：隐藏；
}
.teamy__阿凡达{
显示：块；
宽度：100%；
位置：相对位置；
z指数：1；
}
.小队回来{
显示：无；
}
小队：悬停，小队回来{
宽度：100%；
身高：100%；
显示器：flex；
位置：绝对位置；
排名：0；
左：0；
z指数：3；
}
.teamy_uu后台{
显示器：flex；
对齐项目：居中；
证明内容：中心；
宽度：100%；
}
.覆盖{
身高：0%；
宽度：100%；
位置：固定；
z指数：999；
排名：0；
左：0；
背景色：rgb（0,0,0）；
背景色：rgba（0,0,0,0.9）；
溢出x：隐藏；
过渡：0.5s；
}
.打开{
身高：100%；
}
.覆盖内容{
位置：相对位置；
最高：25%；
宽度：100%；
文本对齐：居中；
边缘顶部：30px；
}
.覆盖{
填充：8px；
文字装饰：无；
字体大小：36px；
颜色：#818181；
显示：块；
过渡：0.3s；
}
.overlay a:悬停，.overlay a:焦点{
颜色：#f1f1；
}
.overlay.closebtn{
位置：绝对位置；
顶部：20px；
右：45px；
字体大小：60px；
}
@媒体屏幕和屏幕（最大高度：450像素）{
.overlay a{font size:20px}
.overlay.closebtn{
字体大小：40px；
顶部：15px；
右：35px；
}
}

包装
AA
BB
科科斯群岛
阅读更多
$('.seemore').click(function() {
  $(this).parents('.tabcontent.active').css('transform','none'); // add this line
  $(this).parents('.scroller__item').next('.overlay').toggleClass('opened');
})

function vertical_tabs() {
  if ($(".ux-vertical-tabs").length > 0) {
    $(".ux-vertical-tabs .tabs button").on("click", function() {
      var temp_tab = $(this).data("tab");
      var temp_tab_js = this.getAttribute("data-tab");
      var temp_content = $(
        '.ux-vertical-tabs .maincontent .tabcontent[data-tab="' +
          temp_tab +
          '"]'
      );
      var temp_content_js = document.querySelector('.ux-vertical-tabs .maincontent .tabcontent[data-tab="' + temp_tab_js + '"]'
      );
      var temp_content_active_js = document.querySelector(
        ".ux-vertical-tabs .maincontent .tabcontent.active"
      );

      $(".ux-vertical-tabs .tabs button").removeClass("active");
      $('.ux-vertical-tabs .tabs button[data-tab="' + temp_tab + '"]').addClass(
        "active"
      );

      var animation_start = anime({
        duration: 400,
        targets: temp_content_active_js,
        opacity: [1, 0],
        translateX: [0, "100%"],
        easing: "easeInOutCubic",
        complete: function() {
          $(".ux-vertical-tabs .maincontent .tabcontent").removeClass("active");
          temp_content.addClass("active");

          //####  Clear transform: translateX(100%) attribute once your animation time ends  ############
          var t = setTimeout(function(){
            temp_content.removeAttr("style");
            clearTimeout(t);
          },450);
          //####  Clear transform: translateX(100%) attribute once your animation time ends  ############
          var animation_end = anime({
            duration: 400,
            targets: temp_content_js,
            opacity: [0, 1],
            translateX: ["100%", "0"],
            easing: "easeInOutCubic"
          });
        }
      });
    });
  }
}