Html 为什么更改背景颜色会阻止此css切换按钮正常工作

已尝试修改此css单选按钮：

如果我更改主体的背景，它可以正常工作，但是如果我将代码包装在

div

中，并更改

div

的背景，转换将停止工作。原因是什么？我假设它与

.btn

的背景转换有关，但我在玩它时无法让它工作。我将如何修复此问题，使其能够在任何背景下工作

这里是HTML

<input id="toggle-on" class="toggle toggle-left" name="toggle" value="false" type="radio" checked>
<label for="toggle-on" class="btn">Yes</label>
<input id="toggle-off" class="toggle toggle-right" name="toggle" value="true" type="radio">
<label for="toggle-off" class="btn">No</label>

---

这是因为

z-index:-1

设置在

body

和

html

上。如果您将切换按钮包装在

div

元素中，并将

div

元素的

z-index

值设置为低于

body

和

html

，则您将能够实现所追求的目标。像这样：

body，html{
背景：#efef；
显示器：flex；
证明内容：中心；
对齐项目：居中；
最小高度：100%；
z指数：-1；
}
div{
背景色：番茄；
z指数：-2；
}
.btn{
边框：3px实心#1A1A；
显示：内联块；
填充：10px；
位置：相对位置；
文本对齐：居中；
过渡：背景600毫秒，颜色600毫秒；
}
输入[type=“radio”]。切换{
显示：无；
}
输入[type=“radio”]。切换+标签{
光标：指针；
最小宽度：60px；
}
输入[type=“radio”]。切换+标签：悬停{
背景：无；
颜色：#1A1A；
}
输入[type=“radio”]。切换+标签：在{
背景：#1A1A；
内容：“；
身高：100%；
位置：绝对位置；
排名：0；
过渡：左200ms三次贝塞尔（0.77,0,0.175,1）；
宽度：100%；
z指数：-1；
}
输入[type=“radio”].toggle.toggle-left+标签{
右边界：0；
}
输入[type=“radio”]。toggle.toggle-left+标签：之后{
左：100%；
}
输入[type=“radio”].toggle.toggle-right+标签{
左边距：-5px；
}
输入[type=“radio”]。toggle.toggle-right+标签：之后{
左-100%；
}
输入[type=“radio”]。切换：选中+标签{
游标：默认值；
颜色：#fff；
过渡：颜色200ms；
}
输入[type=“radio”]。切换：选中+标签：之后{
左：0；
}

对
不

字体颜色也必须与背景相匹配<代码>输入[type=“radio”]。切换：选中+标签{color:tomato；}如何处理嵌套的div？“我做不到。”比布基，这取决于你想筑巢的深度？另外，请记住语义标记。

body, html {
  background: #efefef;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100%;
  z-index: -1;
}
.btn {
  border: 3px solid #1a1a1a;
  display: inline-block;
  padding: 10px;
  position: relative;
  text-align: center;
  transition: background 600ms ease, color 600ms ease;
}
input[type="radio"].toggle {
  display: none;
}
input[type="radio"].toggle + label {
  cursor: pointer;
  min-width: 60px;
}
input[type="radio"].toggle + label:hover {
  background: none;
  color: #1a1a1a;
}
input[type="radio"].toggle + label:after {
  background: #1a1a1a;
  content: "";
  height: 100%;
  position: absolute;
  top: 0;
  transition: left 200ms cubic-bezier(0.77, 0, 0.175, 1);
  width: 100%;
  z-index: -1;
}
input[type="radio"].toggle.toggle-left + label {
  border-right: 0;
}
input[type="radio"].toggle.toggle-left + label:after {
  left: 100%;
}
input[type="radio"].toggle.toggle-right + label {
  margin-left: -5px;
}
input[type="radio"].toggle.toggle-right + label:after {
  left: -100%;
}
input[type="radio"].toggle:checked + label {
  cursor: default;
  color: #fff;
  transition: color 200ms;
}
input[type="radio"].toggle:checked + label:after {
  left: 0;
}