CSS：相对定位的div中绝对位置的相对位置

Question

我有一个外部“容器”div，我想在其中放置内部 div，而内部 div 又将包含垂直和水平居中的文本（以“p”元素的形式）。它看起来像这样：

蓝色部分：外容器部分

绿色：“内部 div”，如您所见，其黑色文本实际上是垂直和水平居中的。

我通过相对定位实现了这一点：

<div class="container" id="c">
        <div id="node1" class="node" style="position: relative; top: 50px; left: 50px;"><p class="numtext" id="node1text">1</p></div>
        <div id="node2" class="node" style="position: relative; top: 100px; left: 100px;"><p class="numtext" id="node2text">2</p></div>
        <div id="node3" class="node" style="position: relative; top: 150px; left: 150px;"><p class="numtext" id="node3text">3</p></div>
</div>

我使用的 CSS 的相关部分如下：

div.container {
    margin-left: auto;
    margin-right: auto;
    position:relative;
    overflow-y: auto;
}

div.node {
    border-radius: 50%;
    text-align: center;
}

p.numtext {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    line-height:100%; /* This vertically centers the text in the parent div, found on stackoverflow */
}

到目前为止，一切都很好。但是，问题是如果我去掉中间的“2”节点，“3”节点的位置也会改变！ （同样，如果我删除“1”节点，其他 2 的位置会发生变化。）它会稍微向上和向左移动，但不会一直移动到 2 之前的位置。见图片：

然而，代码中的其他所有内容都完全相同！所以我认为相对定位与它有关，我是对的；如果我改变了它（例如，div 行现在看起来像：）

<div id="node1" class="node" style="position: absolute; top: 50px; left: 50px;"><p class="numtext" id="node1text">1</p></div>

我得到了一些非常不同的外观：

实际上，这看起来更接近代码“应该”输出的内容，因为节点之间的距离很小，看起来更像 50 像素（作为参考，每个节点的大小为 75.6 像素）。但是，很明显，文本的垂直对齐方式是不正常的，并且有充分的理由 - 节点 [green] 现在绝对定位，因此“相对”定位的文本现在相对于容器定位 [浅蓝色]，而不是节点（我认为我没有正确解释，但我指的是类似于这种情况，我认为：Absolute positioning inside absolute position）。

所以，我认为我需要保持所有三个元素（外部 div、内部 div 和内部文本）相对定位，但我不知道如何使内部 div 的位置相互独立。有什么想法吗？

我也愿意放弃相对定位的想法，绝对定位内部 div 和文本，但我仍然需要文本在绿色圆圈内居中（但请注意，圆圈也可以改变大小[以及文本连同它们]，并且文本可能有多个数字，也许我以后甚至可能想切换到不同的字体，所以确保垂直对齐似乎是一个困难的问题。

Answer 1

如果我错了，请纠正我，但这不是你想要做的吗？

http://jsfiddle.net/h2h6qro4/

.container {
    position: relative;
    width: 300px; /* for demo only */
    margin: 0 auto;
}

.circle {
    position: absolute;
    width: 60px; /* whatever your circle size */
    line-height: 60px; /* whatever your circle size */
    text-align: center;
    border-radius: 50%;
    background: #a0f4b6;
}

.circle-1 {
    top: 50px;
    left: 50px;
}

.circle-2 {
    top: 100px;
    left: 100px;
}

.circle-3 {
    top: 150px;
    left: 150px;
}