How can I position text and a image like this? - html

Question

I'm a newbie and I have been struggling positioning text and Image as the pictures show below. If I use "relative" and "absolute" positioning the text container would position itself over the next content of the page. What would be the best way to make the layout like this?
Desktop Version
Mobile version
I did this while ago and if you open in it Firefox you should see what I'm aming for. Idk why it's not working on Chrome. (If you look at the mobile size, everything is like I want it to be)
https://helaris.github.io/lns/
and code is here: https://github.com/helaris/lns

Answer 1

You can use z-index.
You have to make the image upper.

Answer 2

Managed to get it like on the images above. Not sure If this is the easiest way or not but it works.
Codepen link
HTML -
> <div class="container">
<section class="welcome-section">
<div class="welcome-text-container">
<h1>Welcome to LNS</h1>
<p>We are priviliged to be able to teach you the Norwegian language,
and thereby open the doors to the society around you.
We aim to facilitate your transition to life here in Norway in a
smooth manner. A wise man once said:
Speak to a person in their language, and you speak to their heart.
We also pride ourselves in working on engaging and keeping you
involved in Stavanger life. We know that classroom courses will teach
you how to speak Norwegian, and we provide you just that!
<br>Welcome to class!</p>
</div>
<div>
<img src="images/welcome-image.jpg" alt="">
</div>
</section>
</div>
CSS:
> body {
background-color: #f5f5f5;
}
.container {
position: relative;
max-width: 1200px;
margin: 50px auto;
}
.container img {
position: relative;
width: 80%;
height: 100%;
right: -200px;
}
.welcome-text-container {
z-index: 1;
position: absolute;
max-width: 380px;
background-color: #fff;
line-height: 1.9;
text-align: left;
padding: 1rem;
bottom: 0;
}
.welcome-text-container h1 {
font-family: 'Frank Ruhl Libre', serif;
font-size: 2rem;
font-weight: 400;
padding: 1rem;
border-bottom: 1px solid #a8bfff;
}
.welcome-text-container p {
font-family: 'Montserrat', sans-serif;
padding: 40px 5px 10px 5px;
font-size: 16px;
}
#media screen and (max-width: 901px) {
.welcome-section {
display: flex;
flex-direction: column;
align-items: center;
}
.welcome-text-container {
position: relative;
order: 2;
bottom: 100px;
margin: 0px 15px;
max-width: 35rem;
}
.container img {
order: 1;
width: 100%;
position: initial;
}
.welcome-text-container p {
font-size: 0.9rem;
}
}