Question

我面临着伪元素定位和对齐的问题。我已粘贴下面的片段。你能否告诉我为什么元素重叠以及如何让它们彼此相邻而不重叠？

.switch {
  display: inline-block;
  margin-right: 15px;
}

.switch label {
  position: relative;
  cursor: pointer;
}

.switch input[type="checkbox"] + label::before {
  position: absolute;
  display: inline-block;
  content: '';
  height: 18px;
  width: 33px;
  border: 1px solid gray;
  border-radius: 9px;
  background-color: gray;
  top: 2px;
  right: -50px;
}

.switch input[type="checkbox"]:checked + label::before {
  border: 1px solid red;
  background-color: red;
  right: -50px;
}

.switch input[type="checkbox"] + label::after {
  position: absolute;
  display: inline-block;
  content: '';
  height: 14px;
  width: 14px;
  border: 1px solid white;
  border-radius: 50%;
  background-color: white;
  top: 4px;
  right: -33px;
}

.switch input[type="checkbox"]:checked + label::after {
  right: -48px;
}

.switch input[type="checkbox"] {
  display: none;
}

<div class="switch">
  <input type="checkbox" id="checkbox1">
  <label for="checkbox1">Lorem ipsum Test</label>
</div>
<div class="switch">
  <input type="checkbox" id="checkbox2">
  <label for="checkbox2">Test1</label>
</div>
<div class="switch">
  <input type="checkbox" id="checkbox3">
  <label for="checkbox3">Lorem ipsum Test2</label>
</div>

Answer 1

它们重叠，因为position: absolute将元素从正常流中取出：

在绝对定位模型中，显式偏移框尊重其内容。它从正常流程中删除完全（它对后来的兄弟姐妹没有影响）。 [...]的内容一个绝对定位的元素不会流过任何其他框。它们可能会遮挡另一个盒子的内容（或被遮挡本身）

您可以添加一些余量来修复：

.switch label {
  margin-right: 50px;
}

＆＃13;

.switch {
  display: inline-block;
  margin-right: 15px;
}
.switch label {
  display: block;
  margin-right: 50px;
  position: relative;
  cursor: pointer;
}
.switch input[type="checkbox"] + label::before {
  position: absolute;
  display: inline-block;
  content: '';
  height: 18px;
  width: 33px;
  border: 1px solid gray;
  border-radius: 9px;
  background-color: gray;
  top: 2px;
  right: -50px;
}
.switch input[type="checkbox"]:checked + label::before {
  border: 1px solid red;
  background-color: red;
  right: -50px;
}
.switch input[type="checkbox"] + label::after {
  position: absolute;
  display: inline-block;
  content: '';
  height: 14px;
  width: 14px;
  border: 1px solid white;
  border-radius: 50%;
  background-color: white;
  top: 4px;
  right: -33px;
}
.switch input[type="checkbox"]:checked + label::after {
  right: -48px;
}
.switch input[type="checkbox"] {
  display: none;
}

＆＃13;

<div class="switch">
  <input type="checkbox" id="checkbox1">
  <label for="checkbox1">Lorem ipsum Test</label>
</div>
<div class="switch">
  <input type="checkbox" id="checkbox2">
  <label for="checkbox2">Test1</label>
</div>
<div class="switch">
  <input type="checkbox" id="checkbox3">
  <label for="checkbox3">Lorem ipsum Test2</label>
</div>

＆＃13;

Answer 2

当元素绝对定位时，它会脱离正常流程。这意味着它不会影响其尺寸/位置的其他元素。

解决方案是考虑其在容器元素中的尺寸/位置（在这种情况下 label ）

因此，padding-right:50px给label并相应地定位伪元素将会修复它。

更新了代码

.switch {
  display: inline-block;
  margin-right: 15px;
}

.switch label {
  position: relative;
  cursor: pointer;
  padding-right:50px;
}

.switch input[type="checkbox"] + label::before {
  position: absolute;
  display: inline-block;
  content: '';
  height: 18px;
  width: 33px;
  border: 1px solid gray;
  border-radius: 9px;
  background-color: gray;
  top: 2px;
  right: 0;
}

.switch input[type="checkbox"]:checked + label::before {
  border: 1px solid red;
  background-color: red;
  right: 0;
}

.switch input[type="checkbox"] + label::after {
  position: absolute;
  display: inline-block;
  content: '';
  height: 14px;
  width: 14px;
  border: 1px solid white;
  border-radius: 50%;
  background-color: white;
  top: 4px;
  right: 17px;
}

.switch input[type="checkbox"]:checked + label::after {
  right: 2px;
}

.switch input[type="checkbox"] {
  display: none;
}

<div class="switch">
  <input type="checkbox" id="checkbox1">
  <label for="checkbox1">Lorem ipsum Test</label>
</div>
<div class="switch">
  <input type="checkbox" id="checkbox2">
  <label for="checkbox2">Test1</label>
</div>
<div class="switch">
  <input type="checkbox" id="checkbox3">
  <label for="checkbox3">Lorem ipsum Test2</label>
</div>

CSS伪元素定位问题

2 个答案: