我有 3 个输入和一个图像（与 x y 和 z 测量有关）。它们都相当自然地定位，所以我使用左侧和顶部 px 值来使它们准确。到目前为止，我使用的是相对定位。
我的问题是，当我更改复选框时，我隐藏了 z 输入并更改了图像。当我这样做时，一切都以一种可怕的方式发生了变化。此外，页面底部还有大量空白区域，这可能是由于图像使用了负的顶部值。
我应该使用绝对定位还是其他的东西？
谢谢，
瑞克
FIDDLE：http://jsfiddle.net/WY2DX/52/（使用 SCSS 可能是 CSS 问题：s）
【问题讨论】：
标签： css positioning
假设您需要添加和删除元素，您可能不应该使用相对定位。相对意味着元素在定位方面不会从 DOM 中移除，因此一个元素的大小和位置会影响下一个元素。
Learn CSS Positioning in Ten Steps 是一个很棒的教程，它让您了解不同的定位方法。我相信您正在寻找的是第 4 步，position:relative 用于父容器，然后position:absolute 用于您的 x、y 和 z 标签。
编辑：
我并不完全清楚您的示例应该如何工作，但我想知道标签是否真的意味着自发定位或图像是否是？您可能还想考虑让标签正常定位，并为图像使用position:absolute？
【讨论】：
您能否证明您正在使用的基本标记/css 设置？
但是，是的，您的两个问题似乎都是由使用 [position: relative;] 引起的，因为它相对于其原始位置定位元素。这意味着如果元素“A”最初出现在 0, 0 (X,Y) 并且您执行 { position: relative;左：120px；上：120px； }，元素“A”将重新定位到 120、120 (X,Y)，但它仍然在 0,0 (X,Y) 处占用“物理空间”。这样，当您隐藏或删除其中一个元素时，该“物理空间”将不再被使用，其余内容将发生变化以适应变化。
您可以使用绝对定位来避免这种情况，但也可能取决于使用的上下文。
【讨论】：
在父容器上使用相对定位，对每个子项使用绝对定位。这样添加或删除子元素不会影响其任何兄弟元素。
【讨论】：