Hi , I am stuck on positioning elements in CSS. I have applied the position:“absolute” to my h2 tag. I want this element to stay within the normal flow of the document. However when I minimise my page to a phone/ tablet size the h2 moves up into the pictures. Can anyone help me?` There are two h2 tags about us and dished . The dishes keep moving into the img tag of the first div
THE HTML CODE
<div class="main">
<h2 class="darkgreen">About Us</h2>
<p>At <i>Eatfan</i>, we are passionate about sharing the rich and diverse flavors of authentic Chinese cuisine with our community. Founded on the belief that great food brings people together, our mission is to offer an unforgettable dining experience that captures the essence of China’s culinary heritage.<br><br>
Our chefs are masters of traditional Chinese cooking, crafting each dish with time-honored techniques and the freshest ingredients available. Whether it’s the bold, spicy flavors of Sichuan, the delicate dim sum of Cantonese kitchens, or the savory stir-fries from Northern China, we pride ourselves on delivering an authentic and flavorful experience in every bite.<br><br>
We invite you to explore our carefully curated menu, where you’ll find a perfect balance of flavors, textures, and aromas that reflect the diverse regions of China. Whether you’re dining with us or enjoying takeout, our goal is to provide a genuine taste of Chinese culture and hospitality that will keep you coming back for more.<br><br>
Welcome to Eatfan—where tradition meets flavor, and every meal tells a story.</p>
<img class="right" src="images/cooka.png.jpg" alt="A cook" width="500" height="500"/>
</div>
<div>
<h2 class="absolute darkgreen">Dishes</h2>
</div>
THE CSS CODE
/* position the h2 tag in outside the normal flow */
.absolute{position: absolute;
top: 1600px;
left: 750px;
}
CSS code for my image
/* floating the image to the right */
.right{float: right;
position: relative;
left: 600px;
bottom: 500px;
border-radius: 10%;
border-style: solid;
border-width: 0.2em;
}