DOM对象覆盖其他DOM对象

Question

我在放置DOM元素时遇到了问题。

在这个超文本标记语言(http://bluecodestudio.com/scripts/)中，会出现一个弹出式窗口，动画效果要归功于javascript。在我按下“回车”按钮后，我希望“欢迎”的信息被放在中间。

但它与其他元素“冲突”，我找不到让它在元素上“浮动/流动”的方法。对我的style.css有什么修改来修复它吗？谢谢!

PS:我对脚本和样式表的链接使用绝对路径路由，因为我使用了Nodejs模块，这在某种程度上“迫使”我这样做，或者至少是让它工作的最简单的方法。

编辑: CSS直接链接：http://bluecodestudio.com/scripts/style.css

Answer 1

你可以这样做：

 #welcomeContent
 {
       width: 100%;
       height: 100%;
       z-index: 1; /*For overlapping divs*/
       opacity: 0; /*Not visible on load*/
 }

 #welcomeMessage
 {
      width: 100%;
      text-align: center;
      vertical-align:middle;
  }

从理论上讲，这应该会将您的消息放在父div的中心。您将需要一个z索引，因为这将与div重叠

Answer 2

给你的白色div一个position: relative;，然后给你的欢迎p下面的css：

position: absolute;
text-align: center;
line-height: #px; // same as the white div

我认为这应该能起到作用

编辑：

我之前没有深入研究过。我刚刚在chrome检查器中尝试了一下，你应该用下面的代码替换你的css：

#welcomContent {
position: absolute;
padding: 88px 0;
text-align: center;
height: 200px;
width: 400px;
}

Answer 3

好的，下面是一个伪jQuery解决方案：

var welcome = $(welcome);
var popupMsg = $(popupMsg);
var popup = $(popup);
var enter = $(enterButton);

enter.click(function () {
    var pOff = popup.offset();
    var newLeft = pOff.Left + ((popup.width() - welcome.width()) / 2);
    var newTop = pOff.Top + ((popup.height() - welcome.height()) / 2);

    welcome.css({ left: newLeft, top: newTop });
    popupMsg.fadeOut();
    welcome.fadeIn();
});

如果你有任何问题，请告诉我。

请记住，这只是一个伪函数--您必须填写它。