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

Div element is scrolling over instead of underneath another div element

本文关键字：元素 Div 滚动 另一个      更新时间：2023-09-26

我试图得到一个项目列表滚动下另一个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"当前，我不知道如何让它在下面滚动

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

对于测试，将style="z-index:xx"添加到元素中，其中xx是您选择的某个数字，确保较高的索引是您想要的顶部索引。

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

如果你已经尝试过这种方式，请邮政编码，因为在我看来，这将是最简单的方法来处理这个问题

相关文章：