Question

对于大多数人来说，这似乎很容易解决，但我想我现在已经盯着这个太久了。我通过Google搜索并搜索了整个Stack，但找不到类似的问题/答案。

这是小提琴： http://jsfiddle.net/ufMD5/1/

除了在.emailAlert div中想要填充之外，格式正是我想要的格式。一旦我添加填充（从小提琴中删除注释标记），.form div就会向下移动页面。我只想让.form div留在原地！

顺便说一句，我要感谢那些花时间回答Stack问题的顶级编码员。我们有时都需要帮助，而且我们的业余爱好者很幸运能得到你的帮助，尽管我们的问题可能很愚蠢！

修改

新小提琴：http://jsfiddle.net/ufMD5/11/我将宽度值替换为我实际使用的宽度值，问题在于这个小提琴。我正在使用chrome v32。

Answer 1

在新的小提琴中，.form右侧没有足够的空间来显示电子邮件提醒。表格宽度为650px，电子邮件提醒320px（如果包含填充）和容器960px。它只是不合适。

如果删除相对定位，您可以更清楚地看到发生的情况。电子邮件警报是一个浮动块，表单移动到它下面，有空间。

解决方案：使容器足够宽。

Answer 2

编辑答案后：

问题是添加填充会导致更宽的元素，因此无法在文本附近分配弹出窗口。它们中的两个比容器宽。

在弹出窗口中将位置更改为静态以查看问题。

要再次修复它，我会使用position:absolute来弹出。

刚刚做了一点改变（显然相应地修改了左侧和顶部属性）并且它起作用了：

.emailAlert {
    position: absolute;
    z-index: 50;
    font-weight: bold;
    width: 150px;
    background: #FFD;
    border-radius: 10px;
    border: #999 1px dashed;
    left: 50px;
    top: 70px;
    padding: 10px;
}

由于我们使用的是绝对定位，因此也删除了float:left。

填充使用z-index更改整个布局

2 个答案: