CSS浮动弹出：棘手的CSS定位

Question

我有一个网站，点击链接后会生成一个div。

请允许我更深入地解释一下。我的CMS中有一个“页面”表，我添加了通过一个小弹出div添加新页面的功能。

我的弹出式div在表格下方定义，但是style =“display：none”，因此它不会出现在页面上。单击“添加新页面”按钮后，我的javascript函数会触发：

document.getElementById("addPage").style.display="block";

这允许div在调用时神奇地出现。

然而，这是我的问题;我希望这个div总是显示为中心但是我的标准边距：auto不允许这个div居中，因为它仍然出现在表格下方（尽管右/左居中和z-index：999）。

这是我的CSS代码：

#addPage{
 width:250px; 
 height:180px;
 background-color:#FFFFFF;
 border:1px #000000 solid;
 position:absolute;
 z-index:999;
 padding:10px;
}

Answer 1

由于您需要垂直和水平居中，因此您可以使用dead centre technique。它使用绝对定位将已知宽度/高度的元素放在屏幕的中心。

如果您的叠加层尺寸是动态的，那么您只需运行一些javascript来确定其宽度/高度，然后再显示它。

Answer 2

描述不清楚，可以用屏幕/图表，所以我会在这里意识流：

• z-index与定位无关，只是分层，所以暂时忽略它
• position:absolute或更有可能position:fixed肯定是您需要获得相对于文档/屏幕的位置，而不是另一个元素。
• 听起来你说的是垂直居中，而不是横向，是吗？使用纯CSS解决方案实现这一点要困难得多。
• 由于你给定的风格正确地指定了pos：abs和一个高度，如果它正在应用而不是冲突我没有理由认为你的div不会完全在描述的地方。
• 但是，你也直接使用JS操作样式，就我而言，这是一种反模式，因为它适用于更高的特异性，并且更加模糊，更难以逆转。您应该三重检查您正在对元素执行的操作以及是否可能重构以便仅通过修改类来应用样式。
• 萤火虫表示应用的样式是什么？
• 为什么不使用标准的灯箱/消息箱解决方案？ Web开发中的一般经验法则是，您之前已经完成并标准化了任何事情，因此您需要有充分的理由重新发明轮子。