#title-row { display: flex; justify-content: center; width: 100vh; text-align: center; height:100vh; }.title-img { z-index:1; position: absolute; left: 0; top: 0; }.title-row > p { z-index: 2; position: absolute; font-size: 30px; font-weight: bold; left: 135px; top: 130px; }body { display: flex; justify-content: center; height: 100vh; }<body><div><div class="title-row"><img src="images/png.png"><p>THE TITLE</p><div></div></div><div class="content"><div class="book"><p>Book1 <br>By author1</p></div><div class="book"><p>Book2<br>By author2</p></div><div class="book"><p>Book3<br>By author3</p></div><div class="book"></div><div class="book"></div><div class="book"></div></div></div></body>If I comment out the css for the body, the image and title on top of the img go back to top left position. But it works when applied to the body (which I don't want because I would rather the flex applied only to the title portion so I can work with grids for the main content. )
PS:I'm a beginner, just learnt flexbox and started grids so I apologize if this is an easy question, but I would really appreciate an explanation. Also, this obv isn't complete, I just want the title portion to work before I move onto the content.
tldr, Tried commenting out the body and applying flex to the title container only.