Javascript 收音机选择时页面位置重置

在这个JSFIDLE中进行选择时，为什么页面位置会重置，我如何防止它

HTML:

<fieldset class="rating one">
  <input type="radio" id="star5" name="rating" value="5" /><label for="star5" title="Rocks!"><span>&#9733</span></label>
  <input type="radio" id="star4" name="rating" value="4" /><label for="star4" title="Pretty good"><span>&#9733</span></label>
  <input type="radio" id="star3" name="rating" value="3" /><label for="star3" title="Meh"><span>&#9733</span></label>
  <input type="radio" id="star2" name="rating" value="2" /><label for="star2" title="Kinda bad"><span>&#9733</span></label>
  <input type="radio" id="star1" name="rating" value="1" /><label for="star1" title="Sucks big time"><span>&#9733</span></label>
</fieldset>

★
★
★
★
★

正在发生的事情的质量GIF：

---

编辑：新的JSFIDLE链接

我找到了修复它的方法，但没有找到它发生的原因（尽管我可以猜测它正试图用单选按钮“在视图中”来定位自己）

我更改了以下代码

.rating:not(:checked) > input {
  position:absolute;
  top:-9999px;
  clip:rect(0,0,0,0);
}

到

摆弄

---

页面位置重置是什么意思？除了星星被突出显示，我看不到小提琴里有任何事情发生。我不明白你在想什么achieve@FiidoFirdauz添加了动画gif。我在JSFIDLE中没有看到任何文本，请在中提供。@FiidoFirdauz新的JSFIDLE链接添加。我几乎发布了这个答案。！你终于明白了：D

.rating:not(:checked) > input {
  position:absolute;
  visibility: hidden;
  clip:rect(0,0,0,0);
}