How to make this button position relative?

I have a checkbox which I have converted into a ON-OFF button. But it only works when the label has position: absolute. How can I achieve the same using position: relative so it doesn't hamper the display of the entire page ?

input[type="checkbox"] {
    position:absolute;
    clip: rect(0,0,0,0);
    clip: rect(0 0 0 0);
}

input[type="checkbox"] + label {
    line-height: 30px; height: 27px; cursor: pointer;
    -webkit-transition: background-position 0.3s ease-in-out;
    -moz-transition: background-position 0.3s ease-in-out;
}

input[type="checkbox"] + label::before {
    content: ""; width: 94px; height: 27px;
    background: url(http://ift.tt/2i6d4C4) -56px 0;
    position: absolute;
    border-radius: 4px;
    -webkit-transition: background-position 0.3s ease-in-out;
    -moz-transition: background-position 0.3s ease-in-out;
}

input[type="checkbox"]:checked + label::before {
    background-position: -3px 0;
}

<input id=test type=checkbox value=test checked>
<label for=test></label>