Question

我正在使用Twitter Bootstrap定义带有徽章的列表。我使用javascript添加列表元素及其徽章。但是，当屏幕宽度较小时，无论我为它们键入什么z-index值，列表项始终与徽标重叠。

以下是一些代码：

function addListItems() {
    var node = document.createElement("LI");
    node.className = "list-group-item";
    node.style = "z-index:1;"
    var textItem = document.createTextNode("Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla...");
    node.appendChild(textItem);
        
    var notifications = document.createElement("SPAN");
    notifications.className = "badge";
    notifications.style = "z-index:2;"
    var notificationsText = document.createTextNode("999999999999999999999");
    notificationsText.style = "font-size: 350%";
    notifications.appendChild(notificationsText);
    
    node.appendChild(notifications);
        
    document.getElementById("myList").innerHTML += node.outerHTML;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>

<body>

    <button type="button" class="btn btn-primary" onclick="addListItems()">Add list elements with badges</button>

    <ul id="myList"></ul>

</body>

</html>

请注意，当第二项添加到列表时，即使其z-index较小，它也会与先前添加的标志重叠。

您知道我该如何解决吗？

谢谢。

Answer 1

只需将position: relative添加到徽章的CSS并从z-index: 1的样式中删除node。

According to MDN z-index applies only to positioned elements。

摘要

function addListItems() {
  var node = document.createElement("LI");
  node.className = "list-group-item";
  var textItem = document.createTextNode("Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla...");
  node.appendChild(textItem);

  var notifications = document.createElement("SPAN");
  notifications.className = "badge";
  notifications.style = "position:relative;z-index:1"
  var notificationsText = document.createTextNode("999999999999999999999");
  notificationsText.style = "font-size: 350%";
  notifications.appendChild(notificationsText);

  node.appendChild(notifications);

  document.getElementById("myList").innerHTML += node.outerHTML;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>

<body>

  <button type="button" class="btn btn-primary" onclick="addListItems()">Add list elements with badges</button>

  <ul id="myList"></ul>

</body>

</html>

Answer 2

Andrzej的答案也有效。它也可以使用“ z-index：inherit;”

function addListItems(){
        
    var notifications = document.createElement("SPAN");
    notifications.className = "badge";
    notifications.style = "position:relative;z-index:2"
    var notificationsText = document.createTextNode("999999999999999999999");
    notificationsText.style = "font-size: 350%";
    notifications.appendChild(notificationsText);
    
	var node = document.createElement("LI");
    node.className = "list-group-item";
    node.style = "position:relative;z-index:inherit;"
    var textItem = document.createTextNode("Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla...");
    node.appendChild(textItem);
    
    node.appendChild(notifications);
        
    document.getElementById("myList").innerHTML += node.outerHTML;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<button type="button" class="btn btn-primary" onclick="addListItems()">Add list elements with badges</button>

<ul id="myList"></ul>

</body>
</html>

子级继承父级的z-index

2 个答案:

摘要