Перекрытие элементов в CSS

Как сделать два элемента перекрывающимися в CSS, например.

<div>Content 1</div>
<div>Content 2</div>

Я хотел бы, чтобы два содержимого (они могут быть чем угодно) перекрывались, поэтому отображается Content 2, начиная с того же верхнего левого угла, что и Content 1, и они кажутся перекрывающимися. Содержание 1 должно начинаться в нормальном потоке документа, а не в некоторой фиксированной позиции на экране.

Возможно ли это?

Спасибо,

Ответ 1

Самый простой способ - использовать position:absolute для обоих элементов. Вы можете абсолютно позиционировать относительно страницы, или можете абсолютно позиционировать относительно div контейнера, установив контейнер div в position:relative

<div id="container" style="position:relative;">
    <div id="div1" style="position:absolute; top:0; left:0;"></div>
    <div id="div2" style="position:absolute; top:0; left:0;"></div>
</div>

Ответ 2

Я думаю, вы могли бы уйти с использованием относительного позиционирования, а затем установить верхнее/левое позиционирование второго DIV, пока не найдете его в нужном месте.

Ответ 3

Вы можете использовать относительное позиционирование для перекрытия ваших элементов. Однако пространство, которое они обычно занимают, по-прежнему будет зарезервировано для элемента:

<div style="background-color:#f00;width:200px;height:100px;">
    DEFAULT POSITIONED
</div>
<div style="background-color:#0f0;width:200px;height:100px;position:relative;top:-50px;left:50px;">
    RELATIVE POSITIONED
</div>
<div style="background-color:#00f;width:200px;height:100px;">
    DEFAULT POSITIONED
</div>

В приведенном выше примере будет существовать блок пробелов между двумя элементами "ПО УМОЛЧАНИЮ ПОЗИЦИИ". Это вызвано тем, что элемент RELATIVE POSITIONED по-прежнему имеет зарезервированное пространство.

Если вы используете абсолютное позиционирование, ваши элементы не будут иметь зарезервированного пространства, поэтому ваш элемент будет фактически перекрываться, не нарушая ваш документ:

<div style="background-color:#f00;width:200px;height:100px;">
    DEFAULT POSITIONED
</div>
<div style="background-color:#0f0;width:200px;height:100px;position:absolute;top:50px;left:50px;">
    ABSOLUTE POSITIONED
</div>
<div style="background-color:#00f;width:200px;height:100px;">
    DEFAULT POSITIONED
</div>

Наконец, вы можете контролировать, какие элементы находятся поверх других, используя z-index:

<div style="z-index:10;background-color:#f00;width:200px;height:100px;">
    DEFAULT POSITIONED
</div>
<div style="z-index:5;background-color:#0f0;width:200px;height:100px;position:absolute;top:50px;left:50px;">
    ABSOLUTE POSITIONED
</div>
<div style="z-index:0;background-color:#00f;width:200px;height:100px;">
    DEFAULT POSITIONED
</div>

Ответ 4

Вы можете попробовать использовать свойство transform: translate, передав соответствующие значения в скобках с помощью элемента inspect в Google Chrome.

Вы должны установить свойство translate таким образом, чтобы оба <div> перекрывали друг друга, тогда вы можете использовать JavaScript, чтобы показать и скрыть оба <div> в соответствии с вашими требованиями