我在开发一个库时遇到了一个奇怪的问题，它可以归结为以下代码:
<html>
<body>
<div style="position: absolute; left: 200px;">
<div style="position: absolute; left: 0px; top: 0px">
Hello some text.
</div>
<div style="position: absolute; left: -50px; top: 50px">
Hello some text.
</div>
<div style="position: absolute; left: -100px; top: 100px">
Hello some text.
</div>
<div style="position: absolute; left: -150px; top: 150px">
Hello some text.
</div>
<div style="position: absolute; left: -200px; top: 200px">
Hello some text.
</div>
</div>
</body>
</html>
这里的代码非常简单:我们在不同位置的divs中有相同的文本。 位置是所有div的不同之处。 我希望所有五个文本显示相同，不管是在一行中还是分成多行。 但是，左边的div没有文本换行，右边的有。
这种行为在Chrome 83，Firefox 77和Edge 83中是一致的。
罪魁祸首似乎是左负数，因为如果我移除这些，它会一致地显示（在实际应用中，我无法做到这一点，尽管给定了这些偏移的计算方式）。
<html>
<body>
<div style="position: absolute; left: 0px;">
<div style="position: absolute; left: 200px; top: 0px">
Hello some text.
</div>
<div style="position: absolute; left: 150px; top: 50px">
Hello some text.
</div>
<div style="position: absolute; left: 100px; top: 100px">
Hello some text.
</div>
<div style="position: absolute; left: 50px; top: 150px">
Hello some text.
</div>
<div style="position: absolute; left: 0px; top: 200px">
Hello some text.
</div>
</div>
</body>
</html>
这是所有浏览器中的一个bug吗？ 或者这是合乎逻辑的？
在您的情况下，没有工作的代码是因为只有第一个子div在父div中，因为它的left属性是zero，而其馀的div的在父div之外，因为您为它们提供了负left属性。
如果我试图通过赋予50px的left属性来插入另一个i-e第二个数字div，它将正常运行，因为它将被视为其父级div的成员。
这就是您的工作代码的父divleft属性为0px的原因，因此第一个子left属性为200px，然后第二次使用时为150px，以此类推。因此，所有子级都被视为其父div的成员。 负数在此不可选。
null
<div style="position: absolute; left: 0px;">
<div style="position: absolute; left: 200px; background-color:red; top: 0px">
Hello some text.
</div>
<div style="position: absolute; left: 150px; top: 50px; background-color:red;">
Hello some text.
</div>
<div style="position: absolute; left: 100px; background-color:green; top: 100px">
Hello some text.
</div>
<div style="position: absolute; left: 50px; background-color:green; top: 150px">
Hello some text.
</div>
<div style="position: absolute; left: 0px; background-color:green; top: 200px">
Hello some text.
</div>
</div>
为您的div设置宽度，他们将保持预期。
您可以调整div元素的宽度大小，以便所有文本以相同的方式包装。 如果您希望您的文本跨越3行，下面的代码应该可以工作:
div {
width: 50px;
}
如果希望文本跨越2行以上，请改用width:100px。
如果希望文本跨越2行以上，请改用width:150px。
