Something weird about position property

1

So im using Brackets. I already found out how to position stuff on web which is a great. But i have one question. When i used position : relative; for container3 and for its topright text position: absolute; text appeared in front of container which is a picture but once i used container5 and set its position to relative and its newtext to absolute then text appread behind the contrainer (which is a picture too), but once i set position to relative text appeared in front of container which was weird because previously i had to give “topright” text position of absolute in order to appear in front of container3. Anyone know what this could be and why? Why is it flopping like this?

Here’s my HTML:

<!doctype html>
<html>
<title>Something</title>
<head>
<link rel="stylesheet" type="text/css" href="Something.css">
</head>
    
<body>
    
   
    <h1>Something</h1>
    
 
    
    <img id="image" src="cool.jpg">
    
    <img id="dogpic" src="dogpic.jpg">
    
    
    <div class="container2">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
    </div>
    
    <img id="lion" src="lion.jpg">
    
    <div class="container3">
    <img src="Bird.jpg" width="300" height="300">
    <div class="topright">Topright</div>
    </div>
    
    <div class="container4">
    <img src="land.jpg" width="300" height="200">
    <div class="text">Some text</div>
    </div>
    
    <div class="container5">
    <img src="land.jpg" height="280" width="440">
    <div class="newtext">New text</div>
    </div>
    
    
    
    
    
    </body>
</html>

Here’s my CSS:

body {text-align:center;}




#image {width:400px; height: 400px; position: relative; left: 8cm;}

#dogpic {width: 300px; height: 300px; position: relative; left: 12cm; top: -2.7cm}




.container2 {background-color: blueviolet; width: 450px; height: 560px; position: absolute; top: 530px; left: 720px;}

p {font-size: 30px;}



#lion {width: 300px; height: 300px; position: relative; top:-2.7cm; right: 22.4cm; }



.container3 {position: relative; top: 1.3cm; left: 12cm;}

.topright {position: absolute; font-size: 18px; left: 920px; bottom: 270px; }



.container4 {position: relative; right: 500px; bottom: 260px}

.text {position: absolute; font-size: 18px; left: 900px; top: 10px}




.container5 {position: relative; right: 600px; bottom: 140px;}

.newtext {position:relative; bottom: 50px; font-size: 20px;}

If i have to post any picture to show you a difference no problem.

EDIT: It actually doesnt go behind but dissapears once i set text’s position to absolute, and it appears back if i set it to relative. I made another div of container with same image and a text, this time text with position of absolute moved to bottom left or right and went back on to picture with position set to relative which is really weird

2

It might be simpler if you explain what you are trying to achieve rather than ask why does this do this etc.

What you did doesn’t make much sense to me: https://codepen.io/JohnnyBizzel/pen/mXLKGV