Html CSS在Chrome媒体查询中的绝对位置

我目前正试图在一行中显示所选的div。当用户在小屏幕设备上时，我将行分割为多个片段

我目前面临的问题是，如果用户在一个小窗口中启动，然后扩展窗口，则行不会合并在一起。我相信这是因为开关已经定位，当屏幕大小改变时，chrome不会重新计算绝对位置。我在IE11中测试了同一个页面，结果行合并了

所以我的问题是：如何让CSS在屏幕大小改变时重新计算绝对位置？如果可能的话，我宁愿避免使用JS

场景：

1从大到小，从大到大

用户启动大于35em的窗口。应该只有一行

用户将窗口大小调整为小于35em。现在应该有多行了

用户将窗口调整回大于35em的大小。应该只剩下一行了

2从小到大

用户加载小于35em的窗口。应该有多行。 用户将窗口大小调整为大于35em。应该只有一行。这就是它失败的地方。我相信在chrome中，由于复选框是绝对定位的，所以div只会在复选框允许的范围内向后移动

.toggle {
    /* This is where the problem occurs I believe.  */
    position: absolute;
    /* We use left so that the user will still be on the same level*/
    left: -9999px;
}

.toggle + div label {
    display: inline-block;
    background-color: blue;
    color: #FFF;
    border: 2px solid #FFF;
}

/* Small Screen */
@media (max-width: 35em) {
    .toggle + div {
        display: block;
    }

    .toggle + div label {
        display: block;
    }

}
/* Large Screen */
@media (min-width: 35em) {
    .toggle + div {
        display: inline-block;
    }

    .toggle + div label {
        display: inline-block;
    }

}

测试1 测试2 测试3 编辑：

---

代码的中间部分：

左：-999px。。。嗯？对不起，你在问什么？使用这样的左值是很不寻常的。另一方面，试着制作一个JSFIDLE，我之所以切换为-9999px，是因为我希望用户仍然能够通过键盘选择它。最初我将其设置为display:none，但由于可访问性问题，我不得不执行left:-9999px。我之所以不给它添加一个顶部值，是因为当用户通过选项进行制表时，窗口不应该一直滚动到顶部。我已经制作了一个JSFIDLE，但是只有在窗口很小并展开的情况下运行程序时，您才会看到更改。您可以向标签添加tabindex属性，使其可以通过键盘访问，而不是使用“left”将复选框移出屏幕。这就是说，chrome中的语句因为复选框是绝对定位的，所以div只在复选框允许的范围内向后移动是不正确的-绝对定位的元素不会影响其他元素的位置，而不是它们自己的后代。