Почему изменение цвета фона мешает правильной работе этой кнопки css

Question

Попытался изменить эту радио-кнопку 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>

и CSS (изменен на обычный CSS из ссылки)

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;
}

Answer 1

Это из-за z-index: -1, установленного на body и html.Если вы включите переключатель в элемент div и установите для элемента div значение z-index ниже, чем body и html, то вы сможете достичь того, что вам нужно.Вот так:

body, html {
  background: #efefef;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100%;
  z-index: -1;
}
div {
    background-color: tomato;
    z-index: -2;
}
.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;
}

<div>
    <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>
</div>