CSS浮动弹出窗口:棘手的CSS定位
CSS浮动弹出窗口:棘手的CSS定位
提问于 2010-08-24 18:06:49
我有一个网站，点击一个链接生成一个div。
请允许我更深入地解释一下。我在我的内容管理系统中有一个“页面”表，我已经添加了通过一个小的弹出式div添加新页面的能力。
我的弹出式div是在表格下面定义的，但它是style="display:none“，所以它不会出现在页面上。单击Add New Page按钮后，我的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;
}回答 2
Stack Overflow用户
回答已采纳
发布于 2010-08-24 20:08:48
由于您希望垂直居中和水平居中，因此可以使用dead centre technique。它使用绝对定位将已知宽度/高度的元素放在屏幕的中心。
如果覆盖图的尺寸是动态的，那么在显示它之前，您需要做的就是运行一点javascript来确定它的宽度/高度。
Stack Overflow用户
发布于 2010-08-24 18:19:52
描述不清楚，可以使用屏幕/图表，因此我将在这里介绍意识流：
索引z-
- 与定位无关，只是分层，所以忽略moment
position:absolute，或者更有可能是相对于文档/屏幕的位置，而不是相对于另一个元素的位置。- 听起来你说的是垂直居中，而不是水平居中，对吧？使用纯CSS div很难做到这一点你给定的样式正确地指定了pos:abs和一个高度，如果它是应用的并且不冲突，我看不出为什么你的solution.
- Since不在描述的地方。
- 然而，你也可以直接使用JS来操纵样式，就我而言，这是一种反模式，因为它的应用具有更高的特异性，并且以一种更加混乱和难以逆转的方式应用。你应该三次检查你对元素做了什么，如果可能的话，重构以便仅通过修改类来应用样式类型。
- firebug表明应用的样式是什么？
- 为什么你不使用标准的lightbox/messagebox解决方案？web开发中的一般经验法则是，你想做的任何事情之前都已经完成并标准化了，所以你需要有一个好的理由来重新发明轮子。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/3555349
复制相关文章
相似问题
腾讯云开发者
