Ten dokument to fragment kodu HTML strony internetowej. Oznacza on strukturę początkową jednej z podstron serwisu WordPress opartego na motywie „ismw_theme”. Oto co oznaczają poszczególne elementy:

• <div id="intro"> oraz podstruktura
  Sekcja wprowadzająca na stronie:
  • <div id="introImg"> – zawiera obrazek wprowadzający („ismw_intro.jpg”).
  • <div id="introText"> – pusta przestrzeń na tekst wprowadzający, może być wypełniany dynamicznie lub przez edytor WordPressa.
• Komentarze HTML (<!-- ... -->) służą do opisu sekcji w kodzie, nie są widoczne dla użytkownika.

Tak wygląda kod CSS do wpisania żeby był box

.container-overlap {
position: relative;
width: 400px; /* max szerokość, dostosuj do obrazka */
margin: 0 auto;
}

/* Box tekstowy wyżej, normalnie */

introTekst {

position: relative;
z-index: 2;
background: #1976d2;
color: #fff;
min-height: 120px;
border-radius: 12px;
font-size: 1.3em;
margin: 0; /* ważne: bez marginesu dolnego */
width: 100%;
box-sizing: border-box;
outline: none;
padding: 18px;
text-align: center;
}

/* Obrazek pod spodem, przesunięty ku górze na 30% wysokości boxa */

introImg {

position: relative;
z-index: 1;
/* Przesunięcie w górę o ok. 30% boxa tekstowego / margin-top: -36px; / ok. 30% z 120px, możesz dopasować */
text-align: center;
}
Zamień margin-top: -36px na odpowiednią wartość, jeśli box tekstowy ma inną wysokość.

Zmieniaj szerokości (np. 400px) według własnych potrzeb; szerokość kontenera powinna odpowiadać obrazkowi.

Efekt:
Najpierw box tekstowy, poniżej obrazek, oba zachodzą na siebie w pionie – obrazek “wchodzi” na ok. 30% wysokości boxa tekstowego.

Możesz precyzyjnie dopasować przesunięcie (margin-top), stopień nałożenia, szerokości i wysokości.

Podsumowanie:
Użyj kontenera z position: relative, dwa bloki jeden pod drugim, a dla obrazka ustaw ujemny margin-top na ok. 30% wysokości boxa tekstowego, by uzyskać estetyczne nakładanie elementów.