绝对定位一个元素*在*另一个元素中答案

【问题标题】：positioning an element absolutely *within* another element绝对定位一个元素*在*另一个元素中
【发布时间】：2012-07-07 09:52:46
【问题描述】：

这个问题交给 css 向导。我用谷歌搜索了这个，找不到答案。在这一点上，我不确定这是否可能：

如何指定一个元素在另一个元素中的位置，可以说是半绝对的？

我想说“将元素 inner x 像素放在 outer 的左边框的右侧，无论 outer 发生在哪里就在此刻。”

这可能用 javascript 来实现，但不应该用 css 来实现吗？

【问题讨论】：

在演示中如果没有实际的 CSS，我会说你可能会在外部元素上使用 position: relative，在内部元素上使用 position: absolute。

标签： css positioning

【解决方案1】：

#inner {
    position: absolute;
    left: 10px;
}

这个 CSS 实际所做的是将 #inner 元素定位在距其“最近”父级的左边框 10 像素处，该父级的位置值为 absolute、relative 或 fixed。如果没有找到这样的元素，它相对于body 元素是绝对定位的，但是如果您确保内部元素的父元素的位置由 CSS 定义，它将绝对定位在该父元素中。

Take a look at this JSFiddle. 首先，查看 html 和 CSS 以了解它是如何构造的，然后继续使用鼠标拖动其中一个元素（这就是他们的 javascript 所做的），它纯粹是为了演示目的）。请注意，当您拖动外部元素时，内部元素如何随之移动？当您拖动元素时，您所做的只是更改它们的 top 和 left 属性的值，并且由于其父元素是绝对定位的，因此无论您将子元素移动到何处，它都将保持在其中的同一位置屏幕上。 :D

【讨论】：

感谢您的解释。我编辑了小提琴以合并每个人的答案。 jsfiddle.net/4rP8P/1
那把小提琴很棒。谢谢！

【解决方案2】：

当然，这很容易！您所要做的就是指定父级有一个位置（相对或绝对），然后绝对定位的子级将被定位为“相对”于最近定位的父级。

困惑？

【讨论】：

请记住，left、top、right 和 bottom 不适用，除非元素具有静态以外的位置（如固定、绝对或相对）