如何在所有其他控件之上制作 div答案

【问题标题】：How to make div on top of all other control如何在所有其他控件之上制作 div
【发布时间】：2011-04-26 07:04:37
【问题描述】：

我希望我的 div 显示在我放置 100% 宽度和高度的所有内容之上，并且它显示在很多控件之上，除了一些具有 css z-index 和其他内容。我尝试将 div z-index 设置为一个大数字，但这不起作用。

{
    width: 100%;
    height: 100%;
    top: 5px;
    left: 0px;
    background-color: #FFFFFF !important;
    padding: 10px;
    overflow: hidden;
    visibility: visible;
    display: block;
    z-index: 500 !important;
    position: relative;
}

【问题讨论】：

标签： css z-index

【解决方案1】：

为了将 html 元素从元素在屏幕上布局的自然流程中拉出来，您需要使用 position: absolute。这将允许元素成为其他元素之上的层（假设 z-index 值大于所有其他元素）。

现在你的元素似乎有 position: relative。

【讨论】：

我试试位置：完全一样的问题

【解决方案2】：

问题可能与position:relative 有关。改为绝对值，如果需要偏移元素，用margin代替top/left。

【讨论】：

【解决方案3】：

既然要覆盖整个屏幕，我推荐这个：

#overlayDiv {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index:99;
}

请注意，您不必设置显示和可见性属性。另外，不要在这个元素上设置填充或边距！如果您希望它有填充，请为其子/子设置边距。

此外，请确保所讨论的 DIV 是 BODY 元素的直接子元素。

【讨论】：

这对我有用，但是有什么选项可以让它不固定吗？
@PiniCheyni fixed有问题吗？
在我的情况下，我不想让它固定，我有一个动态页面，它在这个 div 的顶部添加元素，而不是把这个 div 向下推它使这个 div 保持固定在这个位置
@PiniCheyni 听起来是个不同的问题。这个问题是关于“在所有其他控件之上”的元素。考虑提出一个新问题并更详细地描述您的问题:)
问题是这个解决方案产生了我描述的问题而不是原始问题

【解决方案4】：

难道问题只存在于选择和 IE6 中？如果是这样，请查看answers here。

【讨论】：

【解决方案5】：

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}

【讨论】：

代码本身可能有用，但最好能解释一下它是如何工作的。