Нужно ли использовать абсолютное позиционирование для div с z-индексированием?

Question

Я бы хотел расположить div поверх другого div, но абсолютно, что-то вроде:

<div id='parent'>

   <div id='under' z-index='1' width='100' height='100'></div>

   <div id='over' z-index='2' width='100' height='100'></div>

</div>

Я знаю ширину и высоту, мне нужны два элемента div, но я не знаю, какой должна быть абсолютная позиция (если я правильно читаю, нам нужно указать абсолютное расположение элементов div с использованием z-index. Так как они Вы оба в родительском div, я могу просто установить позиции x / y равными 0,0, так что они просто абсолютно позиционированы относительно своих родителей? Эх, вероятно нет - что я могу сделать здесь?

Спасибо

Answer 1

Ну, ключевые слова являются «относительно их родителя», что означает, что родитель должен иметь относительное позиционирование (position :lative;), чтобы содержать абсолютно позиционированные дочерние элементы div, иначе они будут абсолютно позиционированы относительно окно документа.

После того, как вы установили относительную позицию родителя, установите абсолютную позицию дочерних элементов div, по умолчанию они должны перекрываться (0,0) относительно позиции родителя. Затем вы можете указать еще больше, изменив значения для свойств: сверху, справа, снизу, слева.

Answer 2

Вам просто нужно поменять местами ордер, поэтому сначала стоит абсолютный, например:

<div id='parent'>
   <div id='over' style='position: absolute; width: 100px; height: 100px'></div>
   <div id='under' style='width: 100px; height: 100px'></div>
</div>

Вы можете попробовать демо здесь , обратите внимание, что результат красный (#over style).

Это чрезмерно, потому что первый начинается в той же позиции в потоке, что и второй, но не занимает места в потоке, потому что он абсолютен.Это означает, что under div также начинается в той же позиции.