Child inherits parent's z-index

Question

I'm using Twitter Bootstrap to define a list with badges. I add the list elements and their badges using javascript. However, when the screen width is small, the list items always overlaps the badges, no matter what z-index value I type for them.

Here is some code:

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>

Make notice that, when the second item is added to the list, it overlaps the previous added badge, even though its z-index is smaller.

Do you know how can I fix this?

Thanks.

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

Just add position: relative to badge's CSS and remove z-index: 1 from node's styles.

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

Snippet

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>

Thanks for the answer but your code has the same problem. If you re-size the navigator width, the list elements ovelap the badges: https://ibb.co/MDQ3CD8 — Pablo D., Sep 01 '19 at 16:34
Yes, forgot to remove `z-index` from `node` styles. Edited my answer, it works now. — Andrzej Ziółek, Sep 01 '19 at 16:38

score 1 · Answer 2 · answered Sep 01 '19 at 16:44

Andrzej answer is also valid. It can work also using "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>

Yeah, good catch. However adding `z-index: 1` just for the sake of adding is confusing and in my opinion should be avoided. — Andrzej Ziółek, Sep 01 '19 at 18:10

Child inherits parent's z-index

2 Answers2

Snippet