Javascript 子对象继承父对象'；sz指数

我正在使用Twitter引导来定义一个带有徽章的列表。我使用javascript添加列表元素及其标记。但是，当屏幕宽度很小时，列表项总是与徽章重叠，无论我为它们键入了什么z索引值

下面是一些代码：

函数addListItems（）{
var节点=document.createElement（“LI”）；
node.className=“列表组项目”；
node.style=“z-index:1；”
var textItem=document.createTextNode（“布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉……”）；
node.appendChild（textItem）；
var通知=document.createElement（“SPAN”）；
notifications.className=“徽章”；
notifications.style=“z-index:2；”
var notificationsText=document.createTextNode（“999999999999999999999”）；
notificationsText.style=“font size:350%”；
通知.附件（notificationsText）；
追加子节点（通知）；
document.getElementById（“myList”）.innerHTML+=node.outerHTML；
}

引导示例
添加带有徽章的列表元素

只需将

位置：相对
添加到徽章的CSS中，并从
节点的样式中删除
z-index:1


一小条

函数addListItems（）{
var节点=document.createElement（“LI”）；
node.className=“列表组项目”；
var textItem=document.createTextNode（“布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉……”）；
node.appendChild（textItem）；
var通知=document.createElement（“SPAN”）；
notifications.className=“徽章”；
notifications.style=“位置：相对；z索引：1”
var notificationsText=document.createTextNode（“999999999999999999999”）；
notificationsText.style=“font size:350%”；
通知.附件（notificationsText）；
追加子节点（通知）；
document.getElementById（“myList”）.innerHTML+=node.outerHTML；
}

引导示例
添加带有徽章的列表元素

安德烈的回答也是有效的。它也可以使用“z-index:inherit


函数addListItems（）{
var通知=document.createElement（“SPAN”）；
notifications.className=“徽章”；
notifications.style=“位置：相对；z索引：2”
var notificationsText=document.createTextNode（“999999999999999999999”）；
notificationsText.style=“font size:350%”；
通知.附件（notificationsText）；
var节点=document.createElement（“LI”）；
node.className=“列表组项目”；
node.style=“位置：相对；z索引：继承；”
var textItem=document.createTextNode（“布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉……”）；
node.appendChild（textItem）；
追加子节点（通知）；
document.getElementById（“myList”）.innerHTML+=node.outerHTML；
}

引导示例
添加带有徽章的列表元素

谢谢您的回答，但您的代码也有同样的问题。如果重新调整导航器宽度的大小，列表元素将覆盖徽章：是，忘记从
节点
样式中删除
z-index
。编辑了我的答案，现在有效了。是的，接得好。然而，仅仅为了添加而添加
z-index:1
是令人困惑的，我认为应该避免。