Как отобразить блок за блоком (т.е. перекрытие)?

Чтобы отобразить блоки в WordPress с перекрытием друг на друга, вам потребуется использовать CSS-стили и, возможно, JavaScript, в зависимости от того, насколько сложное перекрытие вы хотите добиться.

Вот несколько способов, которые можно использовать для создания перекрывающих блоков в WordPress:

Абсолютное позиционирование:

Присвойте родительскому контейнеру (<div>, <section>, <article> или другому) позиционирование relative.
Для каждого перекрывающего блока (например, <div>, <section> или <article>) добавьте абсолютное позиционирование и задайте топ (top), лево (left), право (right) и/или низ (bottom) для определения их позиции на странице. Вы можете использовать проценты, пиксели или другие единицы измерения в зависимости от вашей задачи.
Установите z-index (индекс слоя) для каждого блока, чтобы определить порядок их перекрытия. Блоки с более высоким z-index будут показываться поверх блоков с более низким значением z-index.

Ниже приведен пример CSS-кода:

   .parent-container {
       position: relative;
   }

   .overlay-block {
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       z-index: 1;
   }

   .underlying-block {
       position: absolute;
       top: 50px;
       left: 50px;
       z-index: 2;
   }

Флексы:

Создайте родительский контейнер (<div>, <section>, <article> или другой) и установите ему свойство display: flex;. Это позволит дочерним элементам располагаться на оси и перекрываться.
Добавьте необходимое количество дочерних блоков и задайте им ширину (width) и высоту (height), а также любые другие свойства (например, цвет фона или дополнительные стили).
По умолчанию, блоки будут отображаться горизонтально, но вы можете изменить это, установив свойство flex-direction на column для вертикального отображения.

Пример CSS-кода:

   .parent-container {
       display: flex;
   }

   .overlay-block {
       width: 200px;
       height: 200px;
       background-color: red;
   }

   .underlying-block {
       width: 300px;
       height: 150px;
       background-color: blue;
   }

Grid:

Создайте родительский контейнер (<div>, <section>, <article> или другой) и установите ему свойство display: grid;. Это позволит дочерним элементам перекрываться.
Добавьте необходимое количество дочерних блоков и задайте им ширину (width) и высоту (height), а также любые другие свойства.
Установите свойство grid-template-areas, чтобы определить порядок и позицию блоков. Каждый блок должен указать свою область.
Если вам требуется более сложное перекрытие, может потребоваться использование JavaScript для динамического изменения стилей или классов блоков.

Пример CSS-кода:

   .parent-container {
       display: grid;
       grid-template-areas: "overlay underlying";
   }

   .overlay-block {
       grid-area: overlay;
       width: 200px;
       height: 200px;
       background-color: red;
   }

   .underlying-block {
       grid-area: underlying;
       width: 300px;
       height: 150px;
       background-color: blue;
   }

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