Javascript 按钮不存在'；变换位置时不要工作

突然，我的按钮停止工作了。我试图将其缩小到导致问题的原因，每当我在

css

-

#filler{
    position:relative;
    left:340px;
    top:85px
}

它一直在工作，突然失去了功能，但只有在我尝试定位它时。 以下是我所有的代码供参考：

函数myFunction（）{
$（'#星号'）.empty（）；
对于（变量i=0；i<7；i++）{
对于（var a=i；a<7；a++）{
$（'#星号'）。附加（“*”）；
}
$（“#星号”）。追加（
”；
}
}

#Obelix{
边框：8px纯黑；
宽度：400px；
高度：200px；
位置：相对位置；
左：250px；
顶部：100px
}
#格塔菲克斯{
宽度：400px；
高度：200px；
位置：相对位置；
左：75px；
底部：126px
}
#星号{
位置：相对位置；
右：325px；
顶部：10px；
变换：旋转（180度）
}
#主包装{
高度：4000px；
宽度：4000px；
职位：相对
}
#填充物{
位置：相对位置；
左：340px；
顶部：85px
}
#填充物{
填充：15px 25px；
字体大小：24px；
文本对齐：居中；
光标：指针；
大纲：无；
颜色：#fff；
背景色：#4CAF50；
边界：无；
边界半径：15px；
盒影：0 9px#999；
}
#填充：悬停{
背景色：#3e8e41
}
#填料：活性{
背景色：#3e8e41；
盒影：0 5px#666；
变换：translateY（4px）；
}

填这个盒子

您需要更改按钮的堆栈顺序，我添加了

z-index:99

到

#填料

现在可以工作了

函数myFunction（）{
$（'#星号'）.empty（）；
对于（变量i=0；i<7；i++）{
对于（var a=i；a<7；a++）{
$（'#星号'）。附加（“*”）；
}
$（“#星号”）。追加（
”；
}
}

#Obelix{
边框：8px纯黑；
宽度：400px；
高度：200px；
位置：相对位置；
左：250px；
顶部：100px
}
#格塔菲克斯{
宽度：400px；
高度：200px；
位置：相对位置；
左：75px；
底部：126px
}
#星号{
位置：相对位置；
右：325px；
顶部：10px；
变换：旋转（180度）
}
#主包装{
高度：4000px；
宽度：4000px；
职位：相对
}
#填充物{
位置：相对位置；
左：340px；
顶部：85px；
z指数：99；
}
#填充物{
填充：15px 25px；
字体大小：24px；
文本对齐：居中；
光标：指针；
大纲：无；
颜色：#fff；
背景色：#4CAF50；
边界：无；
边界半径：15px；
盒影：0 9px#999；
}
#填充：悬停{
背景色：#3e8e41
}
#填料：活性{
背景色：#3e8e41；
盒影：0 5px#666；
变换：translateY（4px）；
}

填这个盒子

您需要更改按钮的堆栈顺序，我添加了

z-index:99

到

#填料

现在可以工作了

函数myFunction（）{
$（'#星号'）.empty（）；
对于（变量i=0；i<7；i++）{
对于（var a=i；a<7；a++）{
$（'#星号'）。附加（“*”）；
}
$（“#星号”）。追加（
”；
}
}

#Obelix{
边框：8px纯黑；
宽度：400px；
高度：200px；
位置：相对位置；
左：250px；
顶部：100px
}
#格塔菲克斯{
宽度：400px；
高度：200px；
位置：相对位置；
左：75px；
底部：126px
}
#星号{
位置：相对位置；
右：325px；
顶部：10px；
变换：旋转（180度）
}
#主包装{
高度：4000px；
宽度：4000px；
职位：相对
}
#填充物{
位置：相对位置；
左：340px；
顶部：85px；
z指数：99；
}
#填充物{
填充：15px 25px；
字体大小：24px；
文本对齐：居中；
光标：指针；
大纲：无；
颜色：#fff；
背景色：#4CAF50；
边界：无；
边界半径：15px；
盒影：0 9px#999；
}
#填充：悬停{
背景色：#3e8e41
}
#填料：活性{
背景色：#3e8e41；
盒影：0 5px#666；
变换：translateY（4px）；
}

填这个盒子

问题是，只要您定位按钮，您的#Getafix div就位于按钮上方。您可以使用z索引来更改此顺序。例如

button {
  z-index: 1;
}

编辑：我在#Getafix中添加了一种几乎透明的背景色，这样您就可以看到它的位置了。如果您没有选择使用z-index（因为您需要它位于按钮上方），您可以使用

指针事件：无。这会导致所有单击事件被#Getafix忽略，并传递给底层按钮。不幸的是，浏览器对poiner事件的支持一般（没有ie10或以下支持）：


函数myFunction（）{
$（'#星号'）.empty（）；
对于（var i=0；i而言，问题在于，只要您定位按钮，您的#Getafix div就位于按钮上方。您可以使用z-index更改此顺序。例如

button {
  z-index: 1;
}

编辑：我在#Getafix中添加了一种浅色的几乎透明的背景色，这样您就可以看到它的位置。如果您不想使用z索引（因为您需要它位于按钮上方的视觉效果），您可以在#Getafix div上使用
指针事件：none；
。这会导致#Getafix忽略所有单击事件，而将其传递到底层按钮。不幸的是，浏览器对poiner事件的支持一般（没有ie10或以下支持）：


函数myFunction（）{
$（'#星号'）.empty（）；
对于（var i=0；iFix div元素（#Getafix）位置或向按钮元素（#filler）添加z索引

当前div元素（#Getafix）是重叠的宽度按钮元素和div元素捕获点击事件。
修复div元素（#Getafix）位置或向按钮元素（#填充）添加z索引

当前div元素（#Getafix）是重叠的宽度按钮元素和div元素捕获点击事件。
您的按钮位于
#Getafix
元素下，因此无法按下

您可以增加
#Asterisk
元素或集合的
z-index