css位置问题：在滚动期间修复答案

【问题标题】：Problem with css position:fixed during scrollingcss位置问题：在滚动期间修复
【发布时间】：2021-05-22 22:09:28
【问题描述】：

我正在做一个学校项目，我无法修复我在它附近创建的滑块的底部。问题是当我滚动页面时，即使我在 css 上使用 position:fixed，它们也会随之滚动。（希望我解释清楚）非常感谢那些会帮助我的人！

.carousel-container {
  padding-top: 6%;
  margin: auto;
  overflow: hidden;
  height: 720px;
  width: 1080px;
  transform: none;
}

.carousel-slide {
  display: flex;
  width: 100%;
  height: 720px;
}

#prevButton {
  position: fixed;
  top: 50%;
  z-index: 10;
  left: 10%;
  cursor: pointer;
}

#nextButton {
  position: fixed;
  top: 50%;
  z-index: 10;
  right: 10%;
  cursor: pointer;
}

<div class="Galleria">
  <div class="carousel-container">
    <div class="carousel-slide">
      <img class="galleria" src="thumb-1920-672647.jpg" id="lastclone">
      <img class="galleria" src="thumb-1920-672645.jpg">
      <img class="galleria" src="thumb-1920-672643.jpg">
      <img class="galleria" src="thumb-1920-672648.jpg">
      <img class="galleria" src="thumb-1920-672647.jpg">
      <img class="galleria" src="thumb-1920-672645.jpg" id="firstclone">
    </div>
    <input id="nextButton" type="image" name="Name of image button" src="Icone\SliderNext.svg" alt="PrevButton">
    <input id="prevButton" type="image" name="Name of image button" src="Icone\SliderPrevious.svg" alt="NextButton">
  </div>
  <hr style="width:50%; position:relative; margin:auto; margin-top:5%;  border-color:#000000;">
</div>

【问题讨论】：

标签： html css position css-position fixed

【解决方案1】：

他们滚动它是因为你给了他们一个特定的高度和宽度，所以当高度 > 750px 时，div 的位置将结束他们。我只是将 Galleria div 设置为一个容器，所以所有元素都在里面所以它就像一张卡片，里面的元素是固定的；你可以试试这段代码：

      .Galleria{
       width:100vw;
       height:100vh;
       position:relative;



       .carousel-container{
        padding-top: 6%;
        margin:auto;
        overflow: hidden;
        height:720px;
        width:1080px;
        transform: none;
       position:fixed;
    }
    .carousel-slide{
    
        display:flex;
        width: 100%;
        height:720px;
    }

    #prevButton{
        position:fixed;
        top:50%;
        z-index:10;
        left:10%;
        cursor:pointer;
    }

    #nextButton{
        position:fixed;
        top:50%;
        z-index:10;
        right:10%;
        cursor:pointer;
    }

    <div class="Galleria">
        <div class="carousel-container">
          <div class="carousel-slide">
            <img class="galleria"  src="thumb-1920-672647.jpg" id="lastclone">
            <img class="galleria" src="thumb-1920-672645.jpg">
            <img class="galleria" src="thumb-1920-672643.jpg">
            <img class="galleria" src="thumb-1920-672648.jpg">
            <img class="galleria"  src="thumb-1920-672647.jpg">
            <img class="galleria" src="thumb-1920-672645.jpg" id="firstclone">
          </div>
            <input id="nextButton" type="image" name="Name of image button" src="Icone\SliderNext.svg"  
            alt="PrevButton">
            <input id="prevButton" type="image" name="Name of image button" src="Icone\SliderPrevious.svg"  
            alt="NextButton">
        </div>
       <hr style="width:50%; position:relative; margin:auto; margin-top:5%;  border-color:#000000;">
    </div>

【讨论】：