CSS的checkbox樣式經常用于表單的選項或者開關，但是當checkbox被選中或取消選中時，頁面上的字體常常會被擠壓或者移動。本文將介紹如何使用CSS來保持check最前，避免這樣的問題。

首先，我們需要了解一下CSS的偽類——:checked。它可以讓你選擇元素的選中狀態，從而使你能夠自定義checkbox的外觀。

input[type="checkbox"] + label:before {
content: ' ';
display: inline-block;
width: 20px;
height: 20px;
margin-right: 10px;
margin-bottom: -5px;
background-color: #fff;
border: 1px solid #ddd;
}
input[type="checkbox"]:checked + label:before {
content: '\2713';
text-align: center;
line-height: 20px;
color: #fff;
background-color: #0077cc;
border-color: #0077cc;
}

上面的代碼定義了checkbox的默認外觀和選中后的外觀。但是當選中時，字體的位置會被擠壓。為了解決這個問題，我們可以使用絕對定位來保持字體的位置固定。

input[type="checkbox"] + label {
position: relative;
}
input[type="checkbox"] + label:before {
position: absolute;
left: 0;
top: 0;
}
input[type="checkbox"] + label span {
position: absolute;
left: 30px;
top: -5px;
}

上面的代碼使用絕對定位來保持checkbox的外觀和字體位置固定。這樣，在選中時，字體不會被擠壓或移動，始終保持在原地。

總結：使用CSS來自定義checkbox的樣式時，一定要注意保持字體的位置不變。可以使用絕對定位來實現此效果。