关于CSS定位的建议，同时删除和添加元素

Question

我有3个输入和一个图像（与x y和z测量有关）。它们都是相当自发的，因此我使用左侧和顶部的px值来确保它们。到目前为止，我已经使用了相对定位。

我的问题是当我更改复选框时，我隐藏了z输入并更改了图像。当我这样做时，一切都以可怕的方式转变。此外，页面底部还有足够的空白区域，可能会使用图像的负顶值。

我应该使用绝对定位还是其他什么？

谢谢，

瑞克

FIDDLE：http://jsfiddle.net/WY2DX/52/（使用SCSS可能是CSS问题：s）

Answer 1

假设您需要添加和删除元素，您可能不应该使用相对定位。相对意味着元素在定位方面没有从DOM中删除，因此一个元素的大小和位置将影响下一个元素。

Learn CSS Positioning in Ten Steps是一个精彩教程，可让您了解不同的定位方法。我相信你要找的是第4步，position:relative用于父容器，然后是position:absolute用于你的x，y和z标签。

修改

我并不完全清楚你的例子应该如何工作，但我想知道这些标签是真的意味着自发定位还是图像是？您可能还需要考虑让标签正常放置，并使用position:absolute作为图像？

http://jsfiddle.net/vh5pY/3/

Answer 2

你能证明你正在使用的基本标记/ css设置吗？

但是，是的，似乎你的问题都是由于使用[position：relative;]而导致元素相对于其原始位置的位置。意思是元素'A'最初出现在0,0（X，Y）并且你做{position：relative;左：120px;，上：120px;元素'A'将重新定位到120,120（X，Y），但它仍占用0,0（X，Y）处的“物理空间”。这样，当您隐藏或删除其中一个元素时，不再使用“物理空间”，其余内容将转移以适应更改。

您可以使用绝对定位来避免这种情况，但也可能取决于使用环境。

Answer 3

在父容器上使用相对定位，并为每个子项使用绝对定位。这样，添加或删除子元素不会影响其任何兄弟元素。