位置：绝对浮动列表中的元素：意外行为

我正在尝试提供一个答案this question jsfiddle，但遇到了一些意想不到的行为。位置：绝对浮动列表中的元素：意外行为

我有一个浮动框的列表（float:left），流过多行。
如果我将position:absolute添加到第一行的框中，它会保持其位置（如预期的那样），但仅限于Chrome（不是FF）。
如果我将position:absolute添加到第二/第三/ ...行上的框中，该框位于包含div的外部。如果我将add top:0和left:0添加到此框中，它位于包含div的左上角。这发生在所有浏览器中。

由于我不知道如何解释/修复这种行为，我想知道是否有其他人有一个想法是怎么回事？

2011-12-21 ptriek

当你删除'float'并使用'display：inline-block'时，它会变得更加混乱：http://jsfiddle.net/hdX4w/1/ – 2011-12-21 17:43:28

@MyHeadHurts实际上是内联块类型解决问题： http://jsfiddle.net/yjmdz/5/然而，我继续研究这个解决方案，并且用jQuery插入一些div来重新定位蓝色块，但是现在我面临着另一个问题：即使粉色块有绝对的定位，它的位置受到之前插入的div的影响。奇怪的事情发生在今天... – ptriek 2011-12-21 18:29:59

根据this实验，元素按照预期定位到包装的顶部，但它们在“浮动元素”之后“移动”，这些元素都应该位于左侧。换句话说，由于剩下的浮点数，绝对值使它们成为列表中的“最后”。

它看起来与float: right相反，如看到here。

不知何故，浮动定位（在左边的场景中）会使浮动后的绝对元素“流出”，并在宽度为100px时将元素“推到”框外。请注意如何用较少的元素绝对落在浮子后面，如here。

来源

2011-12-21 18:52:11 ScottS

是的，这是有道理的。 Chrome似乎在这里显示了一些错误行为（在Chrome中查看http://jsfiddle.net/hdX4w/9/）。 – ptriek 2011-12-21 19:08:57

但是，我刚刚发现了另一个奇怪现象：按照预期与img一起工作，但与divs无关：http://jsfiddle.net/yjmdz/7/ – ptriek 2011-12-21 19:13:24

我提出你指的是原来的问题（我想我将不得不用一个表来解决这个问题）......无论如何，我认为你看到的原因在你的例子中出乎意料的行为是因为我用img标签来创建盒子......如果你在CSS中的所有盒子（包括中小盒子）中添加“display：block”，它就会像预期的那样工作。

来源

2011-12-21 18:34:40 Fred

位置：绝对浮动列表中的元素：意外行为

回答

相关问题