Question

我有一个绝对定位的弹出窗口（悬停在“冰白”图像上看弹出窗口），其中有css离开：50％。现在这应该出现在页面中间但不是。有什么建议吗？提前谢谢。

Answer 1

您还应该添加margin-left，其元素的可见宽度的一半为负值。所以，例如：

width: 400px;
padding: 10px;
border-width: 2px;
/* -(400 + 10 + 2)/2 = -206 */
margin-left: -206px;
left: 50%;

请注意，其他人建议的margin: auto无效，因为您已绝对定位该元素。

Answer 2

大笑，没有。图像的左侧出现在页面宽度的50％处。因此， 左：50％。

要使图像居中，请改为设置 margin：auto 。

Answer 3

您的代码运行正常。弹出窗口的左侧是50％的TD标签，它嵌套在里面。

尝试将弹出窗口取出，或者将其设置为文档宽度的50％。（你的javascript已经缩小，对我来说不可读，或者我会进一步帮助。）

Answer 4

你可以尝试像这样改变CSS样式

#displayDiv {
    background-color: white;
    font-weight: bold;
    height: 460px;
    left: 50%;
    margin: auto auto auto -475px;/* change done here */
    overflow: hidden;
    position: absolute;
    text-align: center;
    top: 80px;
    width: 950px;
    z-index: 1;
}

Answer 5

在我看来，“Ice White”图像和身体之间的某个元素（具体来说，Firebug显示它是<a class="popup1" ... >）位于相对位置，所以你的50％是相对于< em>那而不是整个页面。

我知道这似乎有点违反直觉：如果poput使用绝对定位，为什么它应该是 relative 到父元素？这主要是因为相对定位是相对于元素在文档的正常 flow 中的位置，而绝对定位会使该流的元素 out 。有关详细信息，请参阅the W3C's explanation of the visual formatting model的9.4.3和9.6节。

如果这给您带来麻烦，请查看一两个教程。我喜欢Learn CSS Positioning in Ten Steps和css-tricks.com的“绝对定位内部相对定位”（如果没有垃圾邮件过滤器，我会提供链接;这里是第一次回答;）。

至于如何处理它，你可能能够将弹出窗口移出相对定位的父窗口，就像mblaze75所暗示的那样，但它看起来（我在这里猜测）就像那样<a>是什么的触发您的JavaScript事件，因此您可能无法做到这一点。相反，我会尝试删除相对定位并改为使用边距。

另外，请记住Greg Agnew所说的内容：即使解决了这个问题，你仍然是左边缘而不是弹出窗口的中心。我认为杜丽的回答会照顾到这一点。

left：50％的元素没有出现在页面中间

5 个答案: