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

【问题标题】：Keeping a Pure CSS Carousel in a fixed postion将纯 CSS 轮播保持在固定位置
【发布时间】：2019-12-25 02:39:45
【问题描述】：

我有许多链接在网页上运行，并且都链接到弹出库。每当我点击一个链接时，它都会跳转到网页的末尾，但轮播显示在页面的顶部。

当单击链接打开它时，我试图将纯 CSS 轮播保持在同一位置。

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

这是我已经拥有的。

有什么想法吗？

谢谢

 .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: '⯈'; }

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

【问题讨论】：

标签： css carousel lightbox

【解决方案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: '\2715'; }
 .btn--left { top: 50%; left: 40px; }
 .btn--left:after { content: '⯇'; }
 .btn--right { top: 50%; right: 20px; }
 .btn--right:after { content: '⯈'; }

【讨论】：