CSS Поместите один div прямо поверх другого

Question

У меня есть div, в котором есть кое-что, и пользователь может щелкнуть, например, «x», чтобы сказать «Это не относится ко мне».

Вместо удаленияdiv, я хочу воспроизвести полупрозрачный div поверх него.

Я начал с некоторого сложного javascript, чтобы определить размер и местоположение моего div, о котором идет речь, и создать новый поверх него.В сценарии указывался размер и местоположение, которые выглядели примерно правдоподобно, но div-элемент перекрытия помещался не в ту точку.

Затем я понял, что есть (возможно) гораздо более простой способ сделать это.

Я поместил div с классом "затемнение" внутри div, который я хочу отключить.Класс blackout css имеет видимость, скрытую, поэтому javascript установит ее как видимую при необходимости.

Проблема, с которой я сталкиваюсь, заключается в том, что даже при использовании этого метода я не могу точнозаполните прямоугольник родительского div.

У меня было

.blackout
{
  position: absolute;

  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;

  background-color: black;

  opacity: 0.5;
  filter: alpha(opacity = 50);
}

Это заполнило весь экран, а не только родительский div.

Что мне нужно изменитьзаставить его заполнить только родительский div?

Answer 1

Это заполнило весь экран, а не только родительский div.

Что мне нужно изменить, чтобы заполнить только родительский div?

Вам необходимо добавить position: relative к родителю div.

Это установит родителя div в качестве «содержащего блока» для .blackout:

Если значение свойства position равно absolute, содержащий блок - ближайший предок, другими словами, ближайший предок, свойство position которого имеет одно из значений absolute, fixed или relative.

Подробнее здесь: http://reference.sitepoint.com/css/containingblock

Answer 2

Использование «position: absolute» позиционирует его относительно следующей позиции «position: относительный» div. Если нет одного набора, то он будет использовать тело.

Вам нужно сделать так, чтобы CSS родительского элемента содержал "position: относительный"

Answer 3

Изменить position: absolute; на position: relative;

Answer 4

Добавьте position: relative к родительскому div, overflow: hidden будет скрывать только внешнюю часть родительского div

Answer 5

На CSS родительского элемента:

overflow: hidden;

должно работать

Answer 6

Установите для дочерних элементов <div> width и height значение 100% и удалите ненужную разметку.

http://jsfiddle.net/MvPHj/