将纯 CSS 轮播保持在固定位置

Question

我有许多 link 在网页下方运行并且所有 link 到弹出式画廊。每当我单击 link 时，它会跳转到网页末尾，但轮播显示在页面顶部。

我试图在单击 link 打开它时将纯 CSS 旋转木马保持在同一位置。

此外，当在轮播中单击 "next" 按钮时，它也会跳到底部，这是不应该的。

这是我已有的。

有什么想法吗？

谢谢

 .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: '15'; }
 .btn--left { top: 50%; left: 40px; }
 .btn--left:after { content: '⯇'; }
 .btn--right { top: 50%; right: 20px; }
 .btn--right:after { content: '⯈'; }

    <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
                      
         </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__bg"></div><!-- Close -->
    </div><!-- Close Lightbox -->

这里是fiddle.

Answer 1

请试试这个...我们在此处添加固定灯箱

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 -->

css

.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: '15'; }
 .btn--left { top: 50%; left: 40px; }
 .btn--left:after { content: '⯇'; }
 .btn--right { top: 50%; right: 20px; }
 .btn--right:after { content: '⯈'; }

将纯 CSS 轮播保持在固定位置

Keeping a Pure CSS Carousel in a fixed postion

css

lightbox

carousel