我如何才能使我的早期DIV不被其他后期DIV隐藏

How can I get my earlier DIV to not be hidden by other later DIVs?

本文关键字：DIV 其他 隐藏 我的      更新时间：2023-09-26

我有一个后端模块化的web应用程序。

我正在尝试在其中创建一个弹出div（"新功能"）通知

问题是，创建该DIV的模块在后面的模块之前执行，因此，黑色化DIV被后面的DIV部分隐藏：

                       [ DATA DIV ]
                       [ //////// ]
-----------------------[ //////// ]--------------
| ''' Notification ''' [ //////// ] ''' div ''' |
-----------------------[ //////// ]--------------
                       [ //////// ]
                       [ //////// ]
                       [ //////// ]
                       [ END  DIV ]

CSS或JavaScript中是否有任何方法可以做到这一点，以便早期的通知DIV隐藏后期的DATA DIV，而不是相反？

                       [ DATA DIV ]
                       [ //////// ]
-------------------------------------------------
| ''' Notification '''''''''''''''''''' div ''' |
-------------------------------------------------
                       [ //////// ]
                       [ //////// ]
                       [ //////// ]
                       [ END  DIV ]

谢谢！

要正确定位div（或页面上的任何元素），您需要了解元素的"垂直"（在什么下面）定位是由层控制的（有关详细信息，请参阅W3C视觉格式页面，#9.9:分层表示）。

给定元素所在的层由z-indexCSS属性（在CSS2中可用）控制。

若要将其放在顶部，请使用更高的值（默认值为0）。

因此，如果您的2个DIV具有ID data和notification，请使用以下样式（假设数据与z-index没有自己的样式，并且假设两者都可以具有position: relative;）：

#notification {
    z-index:999;
    position: relative;
}

建议对z索引使用间隔较大的值（例如999而不是1），这样以后可以很容易地在其间对许多元素进行分层。

进一步阅读：

  • http://reference.sitepoint.com/css/z-index（具有良好的浏览器兼容性图表）

  • W3C学校(http://www.w3schools.com/cssref/pr_pos_z-index.asp)

  • W3C可视化格式页面，#9.9:分层表示

CSS应该很容易地将通知div放在其他一切之前。

 div#notification {
    position: relative;
    z-index:9999; }

我假设您动态创建的div是绝对定位的。用css声明z-index:1将使其位于其他div之上，但前提是它们具有较低的z-index。

点击此处阅读更多信息。

相关文章：