I can only change the "bottom" position with "px" and not "%"

Question

I am trying to change the relative’s vertical position ". switch", but I can only do it with px and not with %. How can I solve this?

HTML

  <label class="switch"> 
     <input type="checkbox">
     <span class="slider round"></span>
  </label>

CSS

.switch{
    position: relative;
    display:inline-block;
    width: 60px;
    height: 34px;
    left: 50%;
    bottom: 150px;
}

.switch input{
    opacity: 0;
    width: 0;
    height: 0;
}

.slider{
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}


.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

Answer 1

It will only work in % if the father of label has a defined height, because without a reference height you would calculate the % based on what? therefore % does not work, pq does not have a value reference, and with PX vc declares a fixed value.

In the example below I put your label within a div with defined height, then you can see that the bottom worked out!

.switch{
    position: relative;
    display:inline-block;
    width: 60px;
    height: 34px;
    left: 50%;
    bottom: 10%;
}

.switch input{
    opacity: 0;
    width: 0;
    height: 0;
}

.slider{
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

.box {
  height: 100px;
  border: 1px solid #000;
}

<div class="box">
  <label class="switch"> 
    <input type="checkbox">
    <span class="slider round"></span>
  </label>
</div>