我正在創建一個網頁，當點擊一個按鈕時，就會出現一個包含文本的元素。但是，文本比div大，所以我將div的css改為如下所示:

出現滾動條，但當我嘗試滾動時，沒有任何反應。 這是我的HTML

.exampleDiv {
  background-color: white;
  width: 96vw;
  height: 80vh;
  border-color: gray;
  border-style: solid;
  text-align: center;
  position: relative;
  z-index: -1;
  overflow-y: scroll;
  scroll-behavior: smooth;
}

<div class="exampleDiv" >
  <div class="statsheet" id="statsheet">
    <p><b>Bold</b></p>
    <p id="Text">Text</p>
    <p id="Text">Text</p>
      <p id="Text">Text</p>
      <p><b>Bold</b></p>
      <p id="skill1">Skill 1: None</p>
      <p id="skill2">Skill 2: None</p>
      <p id="skill3">Skill 3: None</p>
      <p id="skill4">Skill 4: None</p>
      <p id="skill5">Skill 5: None</p>
      <p><b>Bold</b></p>
      <p id="prof1">Prof. 1: None</p>
      <p id="prof2">Prof. 2: None</p>
      <p id="prof3">Prof. 3: None</p>
      <p id="prof4">Prof. 4: None</p>
      <p id="prof5">Prof. 5: None</p>
      <p id="prof6">Prof. 6: None</p>
      <p id="prof7">Prof. 7: None</p>
  </div>
</div>

滾動條不滾動，因為exampleDiv z-index:-1；它的位置也是相對的，所以你可以:

將exampleDiv位置更改為類似absolute的其他位置。

.exampleDiv {
    background-color: white;
    width: 96vw;
    height: 80vh;
    border-color: gray;
    border-style: solid;
    text-align: center;
    position: absolute;
    z-index: -1;
    overflow-y: scroll;
    scroll-behavior: smooth;
}

或者移除z-index或將其設置為大于或等于0。像這樣:

注意:我刪除了style = & quot顯示:無；"因為這與問題無關。

.exampleDiv {
  background-color: white;
  width: 96vw;
  height: 80vh;
  border-color: gray;
  border-style: solid;
  text-align: center;
  position: relative;
  z-index: 0;
  overflow-y: scroll;
  scroll-behavior: smooth;
}

<div class="exampleDiv" >
    <div class="statsheet" id="statsheet" style="">
      <p><b>Bold</b></p>
      <p id="Text">Text</p>
      <p id="Text">Text/p>
        <p id="Text">Text</p>
        <p><b>Bold</b></p>
        <p id="skill1">Skill 1: None</p>
        <p id="skill2">Skill 2: None</p>
        <p id="skill3">Skill 3: None</p>
        <p id="skill4">Skill 4: None</p>
        <p id="skill5">Skill 5: None</p>
        <p><b>Bold</b></p>
        <p id="prof1">Prof. 1: None</p>
        <p id="prof2">Prof. 2: None</p>
        <p id="prof3">Prof. 3: None</p>
        <p id="prof4">Prof. 4: None</p>
        <p id="prof5">Prof. 5: None</p>
        <p id="prof6">Prof. 6: None</p>
        <p id="prof7">Prof. 7: None</p>
    </div>
</div>