呈现两个纯CSS奇特复选框时出现问题

我正试图想出一个纯粹的CSS（不使用第三方库）奇特的复选框。只要我必须呈现一个复选框，代码就可以正常工作。但是，当我添加第二个复选框时，第二个元素呈现在第一个复选框的顶部。第二个问题与标签文本有关。有什么想法吗

。复选框五{
位置：相对位置；
}
.复选框5输入{
显示：无；
}
.Checkbox5标签{
光标：指针；
位置：绝对位置；
宽度：12px；
高度：12px；
背景：#eee；
边框：1px实心#ddd；
}
.复选框5标签：之后{
不透明度：0；
内容：''；
位置：绝对位置；
宽度：11px；
高度：4px；
背景：透明；
边框：2倍实心#333；
边界顶部：无；
边界权：无；
变换：旋转（-45度）；
}
.Checkbox5标签：悬停：：之后{
不透明度：0.5；
}
.Checkbox5输入[类型=复选框]：选中+标签：之后{
不透明度：1；
}

选择1
选择2

问题出在你的父母身上。您需要提供填充/边距或特定高度来固定它

.checkboxFive {
  position: relative;
  padding:10px;
  float:left
}

。复选框五{
位置：相对位置；
填充：10px；
浮动：左
}
.复选框5输入{
显示：无；
}
.Checkbox5标签{
内容：''；
光标：指针；
位置：绝对位置；
宽度：12px；
高度：12px；
背景：#eee；
边框：1px实心#ddd；
}
.Checkbox5标签：之前{
不透明度：0；
内容：''；
位置：绝对位置；
宽度：11px；
高度：4px；
背景：透明；
边框：2倍实心#333；
边界顶部：无；
边界权：无；
变换：旋转（-45度）；
}
.Checkbox5标签：悬停：：之前{
不透明度：0.5；
}
.checkboxFive输入[类型=复选框]：选中+标签：之前{
不透明度：1；
}

---

问题出在你的父母身上。您需要提供填充/边距或特定高度来固定它

.checkboxFive {
  position: relative;
  padding:10px;
  float:left
}

。复选框五{
位置：相对位置；
填充：10px；
浮动：左
}
.复选框5输入{
显示：无；
}
.Checkbox5标签{
内容：''；
光标：指针；
位置：绝对位置；
宽度：12px；
高度：12px；
背景：#eee；
边框：1px实心#ddd；
}
.Checkbox5标签：之前{
不透明度：0；
内容：''；
位置：绝对位置；
宽度：11px；
高度：4px；
背景：透明；
边框：2倍实心#333；
边界顶部：无；
边界权：无；
变换：旋转（-45度）；
}
.Checkbox5标签：悬停：：之前{
不透明度：0.5；
}
.checkboxFive输入[类型=复选框]：选中+标签：之前{
不透明度：1；
}

这是使用

位置：绝对的缺点position:absolute的缺点