Div 元素滚动到另一个 div 元素上方而不是下方

Question

我正在尝试获取一个项目列表以在面板中的另一个 div 元素下方滚动，但现在它正在滚动它。我试过使用 CSS z-index 属性，但它对我不起作用。我不确定我是否正确使用它，因为这是我第一次尝试在 z 轴上定位元素。

HTML:

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="bootstrap.min.css">
  <script src="update.js"></script>
  <script src="scrollDrag.js"></script>
</head>

<body onload="update()">
  <ul class="board list-group" style="overflow:hidden">
    <div id="lb"></div>
    <div id="sub-lb"></div>
  </ul>
</body>  
</html>

JS: (update.js)

function update() {
  "use strict";

//  setTimeout(function () {update(); }, 10000);

  // List of variables
  var xmlhttp, resultString, unorderedList, listItem, infoText, arrayInfo, info,
    i, temp, span;

  // code for IE7+, Firefox, Chrome, Opera, Safari
  if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
  } else { // code for IE6, IE5
    xmlhttp = new window.ActiveXObject("Microsoft.XMLHTTP");
  }

  xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
      // Split php response text into an array (contains the top 50 of leaderboard)
      resultString = xmlhttp.responseText;
      arrayInfo = resultString.split(";");

      // Set up the rank, name, total headings
      listItem = document.createElement("li");
      listItem.setAttribute("class", "list-group-item heading");
      listItem.setAttribute("style", "background-color:#0066FF");
      infoText = document.createTextNode("Rank");
      span = document.createElement("span");
      span.setAttribute("style", "margin-left:1%");
      span.appendChild(infoText);
      listItem.appendChild(span);
      infoText = document.createTextNode("Name");
      span = document.createElement("span");
      span.setAttribute("style", "position:absolute; left:35%");
      span.appendChild(infoText);
      listItem.appendChild(span);
      infoText = document.createTextNode("Zenny");
      span = document.createElement("span");
      span.setAttribute("style", "float:right");
      span.appendChild(infoText);
      listItem.appendChild(span);
      document.getElementById("lb").appendChild(listItem);

      // Loop through arrayInfo
      for (i = 0; i < arrayInfo.length - 1; i += 1) {
        // Split content of each index of arrayInfo and store it into a new array
        // Split in form of rank, name, money
        temp = arrayInfo[i];
        info = temp.split(",");

        // Create a new list item element
        listItem = document.createElement("li");
        listItem.setAttribute("class", "list-group-item");
        listItem.setAttribute("style", "width:100%; font-size:150%");

        // Create a new span element for rank 
        infoText = document.createTextNode(info[0]);
        span = document.createElement("span");
        span.setAttribute("style", "margin-left:2%");
        span.appendChild(infoText);
        listItem.appendChild(span);

        // Create a new span element for name
        infoText = document.createTextNode(info[1]);
        span = document.createElement("span");
        span.setAttribute("style", "position:absolute; left:35%");
        span.appendChild(infoText);
        listItem.appendChild(span);

        // Create a new span element for money
        infoText = document.createTextNode(info[2]);
        span = document.createElement("span");
        span.setAttribute("style", "float:right; margin-right:2%");
        span.appendChild(infoText);
        listItem.appendChild(span);

        document.getElementById("sub-lb").appendChild(listItem);
      }
    }
  };

  xmlhttp.open("GET", "update.php", true);
  xmlhttp.send();
  return false;
}

scrollDrag.js文件只指定了要滚动的元素，即"sub-lb"，以及触摸和拖动事件，所以这应该不是问题的原因。

问题重复：元素 "sub-lb" 当前正在元素 "lb" 上滚动，我不知道如何让它滚动到下方。

Answer 1

您似乎在使用股票 Bootstrap css。从您提供的代码来看，据我所知，z-index 似乎没有设置在任何地方。

为了测试，将 style="z-index:xx" 添加到元素中，其中 xx 是您选择的一些数字，确保较高的索引是您想要的索引。

一旦您确认这有效，您应该考虑包括一个覆盖 css 文件，其中包含您所有的 css 自定义，这样您就可以避免内联样式并保留 Bootstrap css 原样。

如果您已经尝试过这种方法，请post编码，因为在我看来，这是解决此问题的最简单方法。

Div 元素滚动到另一个 div 元素上方而不是下方

Div element is scrolling over instead of underneath another div element

html

javascript

css

overlay