スタイル付きチェックボックス内のラベルが動いています、なぜですか？

Question

私がチェックボックスを使って作業しているとき、私はそれが必要な方法でスタイルを設定しましたが、その横のラベルは動き続けます。チェックを外すと、ボックスの下部に位置合わせされますが、チェックされると、中央に移動してボックスに合わせます。

.check { 
    width: 100%; 
    font-weight: normal; 
    margin-bottom: 0px; 
} 

.check label { 
    content: " "; 
    width: 18px; 
    height: 18px; 
    border: 1px solid #dae2e6; 
    margin-right: 10px; 
    display: inline-block; 
} 

.check label::after { 
    font-size: 13px; 
    color: #8e989f; 
} 

.check input[type="checkbox"]:checked + label::after { 
    font-family: "Material Icons"; 
    content: "\e5ca"; 
} 

.check input[type="checkbox"] { 
    left: -9999px; 
    position: absolute; 
} 
.check input[type="checkbox"]:checked + label + div { 
    display: inline-block; 
} 

<label class="check"> 
           <input type="checkbox" value="mandatory" name="checkbox1" id="check3"> 
           <label for="check3"> </label> 
           Mark as Mandatory 
          </label> 

Answer 1

.check { 
 
    width: 100%; 
 
    font-weight: normal; 
 
    margin-bottom: 0px; 
 
} 
 

 
.check label { 
 
    content: " "; 
 
    width: 18px; 
 
    height: 18px; 
 
    border: 1px solid #dae2e6; 
 
    margin-right: 10px; 
 
    display: inline-block; 
 
    float: left; /*MODIFICATION */ 
 
    
 
} 
 

 
.check label::after { 
 
    font-size: 13px; 
 
    color: #8e989f; 
 
    
 
} 
 

 
.check input[type="checkbox"]:checked + label::after { 
 
    font-family: "Material Icons"; 
 
    content: "\e5ca"; 
 
    
 
} 
 

 
.check input[type="checkbox"] { 
 
    left: -9999px; 
 
    position: absolute; 
 
    
 
} 
 
.check input[type="checkbox"]:checked + label + div { 
 
    display: inline-block; 
 
    
 
}

<label class="check"> 
 
<input type="checkbox" value="mandatory" name="checkbox1" id="check3"> 
 
    <label for="check3"> </label> 
 
           Mark as Mandatory 
 
          </label>

ちょうどこのfloat:leftプロパティを追加します。

.check label { 
    content: " "; 
    width: 18px; 
    height: 18px; 
    border: 1px solid #dae2e6; 
    margin-right: 10px; 
    display: inline-block; 
    float: left; /*MODIFICATION*/ 

} 

Working fiddle