将纯CSS旋转木马保持在固定位置

我有一个网页的链接，所有链接都指向一个弹出式图库。 每当我点击一个链接，它就会跳到网页的末尾，但旋转木马会显示在页面的顶部

我试图保持纯CSS旋转木马在相同的位置时，点击链接打开它

此外，当在旋转木马中单击“下一步”按钮时，它也会跳到底部，这是不应该的

这是我已经有的东西

有什么想法吗

谢谢

.lightbox\uuu幻灯片img{
位置：绝对位置；
z指数：30；
最大宽度：90%；
最高高度：80%；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
动画名称：隐藏；
动画持续时间：0.5s；
动画迭代次数：1；
动画方向：线性；
动画填充模式：正向；
}
.lightbox\u幻灯片：target.btn{display:block；}
.灯箱幻灯片：目标图像{
不透明度：0；
动画名称：show；
动画持续时间：0.5s；
动画迭代次数：1；
动画方向：线性；
动画填充模式：正向；
}
.lightbox\幻灯片：目标~.lightbox\背景{
位置：相对位置；
背景：白色；
不透明度：0.6；
排名：0；
左：0；
宽度：100%；
身高：100%；
z指数：1；
}
@-webkit关键帧显示{0%{opacity:0；}100%{opacity:1；}}
@-webkit关键帧隐藏{0%{opacity:1；}100%{opacity:0；}}
.btn{
位置：绝对位置；
z指数：20；
显示：无；
过渡：均为0.2s；
宽度：40px；
高度：40px；
利润率：-20px0-20px；
文本对齐：居中；
线高：40px；
文字装饰：无；
颜色：黑色；
}
.btn:hover{背景：rgba（255，255，255，0.8）；}
.btn--关闭{top:40px；right:20px；}
.btn--关闭：在{content:'\2715'；}之后
.btn--左{顶部：50%；左：40px；}
.btn--左：{content:'之后⯇'; }
.btn—右{top:50%；右：20px；}
.btn--右：{content:'⯈'; }


线
线
线
线
线
线
线
线
线
线
线
线
线
线
线
线

线
线
线
线
线
线
线
线
线
线
线
线
线
线
线
线

线
线
线
线
线
线
线
线
线
线
线
线
线
线
线
线
请试试这个……我们在这里添加了灯箱修复

html

<span class="feature_category active" id="A">
                         <div class="feature_box_wrapper"><a href="#groys1">Link</a></div>
                         <br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line
                          <div class="feature_box_wrapper"><a href="#groys2">Link</a></div>
                          <br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line
                          <div class="feature_box_wrapper"><a href="#groys3">Link</a></div>
                          <br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line
                          <div class="feature_box_wrapper"><a href="#groys4">Link</a></div>
                          <br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line
                          <div class="feature_box_wrapper"><a href="#groys5">Link</a></div>
                          <br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line
                    </span>



<div class="lightbox">
    <!-- Groys -->
    <div class="lightbox__slide" id="groys1">
        <a href="#_" class="btn btn--close"></a>
        <a href="#groys5" class="btn btn--left"></a>
        <a href="#groys2" class="btn btn--right"></a>
        <img src="https://picsum.photos/seed/picsum/800/450" alt="Screenshot of your site">
    </div>
    <div class="lightbox__slide" id="groys2">
    <a href="#_" class="btn btn--close"></a>
    <a href="#groys1" class="btn btn--left"></a>
    <a href="#groys3" class="btn btn--right"></a>
    <img src="https://picsum.photos/seed/picsum/800/450" alt="Screenshot of your site">
  </div>
  <div class="lightbox__slide" id="groys3">
    <a href="#_" class="btn btn--close"></a>
    <a href="#groys2" class="btn btn--left"></a>
    <a href="#groys4" class="btn btn--right"></a>
    <img src="https://picsum.photos/seed/picsum/800/450" alt="Screenshot of your site">
  </div>
  <div class="lightbox__slide" id="groys4">
    <a href="#_" class="btn btn--close"></a>
    <a href="#groys3" class="btn btn--left"></a>
    <a href="#groys5" class="btn btn--right"></a>
    <img src="https://picsum.photos/seed/picsum/800/450" alt="Screenshot of your site">
  </div>
  <div class="lightbox__slide" id="groys5">
    <a href="#_" class="btn btn--close"></a>
    <a href="#groys4" class="btn btn--left"></a>
    <a href="#groys1" class="btn btn--right"></a>
    <img src="https://picsum.photos/seed/picsum/800/450" alt="Screenshot of your site">
  </div>


  <div class="lightbox__bg"></div><!-- Close -->
</div><!-- Close Lightbox -->

.feature_category{
  position:relative;
  z-index:999;
}
.lightbox{
  position:fixed;
  top:0;
  right:0;
  width:100%;
  height:100%;
}
.lightbox__slide img {
     position: absolute;
     z-index: 30;
     max-width: 90%;
     max-height: 80%;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     animation-name: hide;
     animation-duration: 0.5s;
     animation-iteration-count: 1;
     animation-direction: linear;
     animation-fill-mode: forwards;
}
 .lightbox__slide:target .btn { display: block; }
 .lightbox__slide:target img {
     opacity: 0;
     animation-name: show;
     animation-duration: 0.5s;
     animation-iteration-count: 1;
     animation-direction: linear;
     animation-fill-mode: forwards;
}
 .lightbox__slide:target ~ .lightbox__bg {
     position: relative;
     background:white;
     opacity: 0.6;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 1;
}

 @-webkit-keyframes show { 0% { opacity: 0; } 100% { opacity: 1; } }
 @-webkit-keyframes hide { 0% { opacity: 1; } 100% { opacity: 0; } }
 .btn {
     position: absolute;
     z-index: 20;
     display: none;
     transition: all 0.2s;
     width: 40px;
     height: 40px;
     margin: -20px 0 0 -20px;
     text-align: center;
     line-height: 40px;
     text-decoration: none;
     color:black;
}
 .btn:hover {background: rgba(255, 255, 255, 0.8);}
 .btn--close { top: 40px; right: 20px; }
 .btn--close:after { content: '\2715'; }
 .btn--left { top: 50%; left: 40px; }
 .btn--left:after { content: '⯇'; }
 .btn--right { top: 50%; right: 20px; }
 .btn--right:after { content: '⯈'; }