Как сделать div поверх всех остальных элементов управления

Я хочу, чтобы мой 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;
}

Ответы

Ответ 1

Поскольку вы хотите охватить весь экран, я рекомендую следующее:

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

Обратите внимание: вам не нужно устанавливать свойства отображения и видимости. Кроме того, не устанавливайте прописку или маржу на этом элементе! Если вы хотите, чтобы у него было отступы, задайте разметку для своего ребенка/детей.

Кроме того, убедитесь, что рассматриваемый DIV является прямым дочерним элементом элемента BODY.

Ответ 2

Чтобы вытащить элемент html из естественного потока, как элементы выложены на экране, вам нужно использовать положение: абсолютное. Это позволит элементу стать слоем над другими элементами (при условии, что значение z-index больше, чем все остальные).

Прямо сейчас у вашего элемента есть позиция: относительная.

Ответ 3

Вероятно, проблема связана с position:relative. Установите вместо него абсолютное значение, и если вам нужно смещать элемент, используйте margin вместо top/left.

Ответ 4

Может ли быть, что проблема существует только при выборе и в IE6? Если да, просмотрите ответы здесь.

Ответ 5

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