CSS定位：绝对定位 + 动态高度

Question

我有4个

标签，一个接一个地排列，所有标签都使用position:absolute对齐，使用top和left属性。第三个

标签包含动态内容，其高度会根据其中的文本量而变化。然而，由于我设置了所有

标签的top和left属性，第四个

标签会受到第三个动态

标签高度的影响。我该如何解决这个问题？

http://jsfiddle.net/25Xrh/

- Or Weinberger

---

它们是否应该是绝对定位的？ - Damien Pirsy

Answer 1

你可以尝试将这4个div放在一个父div中，并对其进行绝对定位。然后你就可以让其中一个子div的位置影响到另一个子div。

解决方案意味着无论你尝试什么，都会影响到“top:60px”和“left:180px”，使它无法移动到其他位置，因此动态内容div无法重新定位它。

参考链接：http://jsfiddle.net/25Xrh/5/

- Dan Hanly

---

如果将position:absolute替换为'fixed'，是否有可能解决这个问题？ - Or Weinberger

固定定位意味着它始终保持在那里。如果您滚动，它会停留在原地。例如，您可以在某些网站上看到，当您向下滚动页面时，导航始终可见，这就是固定定位。通常最佳实践是无论如何都要包装div，这样可以很容易地重新定位多个div。 - Dan Hanly

Answer 2

这是我的测试： http://jsfiddle.net/neuroflux/25Xrh/7/ 代码：

.first {
    position:relative;
    left:180px;
}

.second {
    position:relative;
    left:180px;
}

.third {
    position: relative;
    left:180px;
}

.fourth {
    position:relative;
    left:180px;
}

- Barrie Reader