Перекрывающиеся элементы в CSS

Question

Как сделать так, чтобы два элемента перекрывались в CSS, например,

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

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

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

Спасибо

AJ

Answer 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>

Answer 2

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

<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>

Answer 3

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

Answer 4

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

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