DOM对象而不是其他DOM对象

DOM objects over other DOM objects

本文关键字：DOM 对象 其他      更新时间：2023-09-26

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

在此HTML中(http://bluecodestudio.com/scripts/)，会出现一个弹出窗口，由于使用了javascript，因此显示了动画效果。在我按下"回车"按钮后，我希望"欢迎"信息放在中间。

但它与其他元素"碰撞"，我找不到让它在元素上"浮动/流动"的方法。对我的style.css有什么修改吗？谢谢

PS：我对脚本和样式表的链接使用绝对路径路由，因为我使用了一个Nodejs模块，它有点"强迫"我这样做，或者至少是让它工作的最简单方法。

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

给您的白色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;
}

您可以这样做：

 #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的重叠

好的，这里有一个伪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();
});

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

 

记住，这只是伪-你必须填写它。

首先，您需要用display隐藏#loginContentdiv：当它淡出时，将不显示，然后在确定布局时将不再考虑它。

然后将欢迎文本水平居中，将float: left从#welcomeContent分区上取下。

如果您还想将文本垂直居中，有多种方法可以实现，其中一些方法如下所述：http://www.vanseodesign.com/css/vertical-centering/.如果你只想说一个词"欢迎！"！，线条高度方法可能是最简单的。

相关文章：