0

I've read about the position property and its values but didn't understand position absolute's behavior on its element (practically).

Below are the two images in which .bottom cloud and .mountain are given position absolute property in the respective below images.

HTML and CSS codes are given at the end

But the behavior is different:-

1.).bottom-cloud goes up(above) the mountain image i.e, still inside the conainer-1

2.).mountain not only went away its previous position but also went outside the container-1

images:- 1.) enter image description here

2.) enter image description here

HTML:-

<body>
       <div class="container">
           <div class="content-1">
               <img class="top-cloud" src="images/cloud.png" alt="Clouds">
                     <div class="header-2">
                        <h1>I'm Pradeep Gaur</h1>
                        <p>A Computer Science Geek</p>
                     </div> 
               <img class="bottom-cloud" src="images/cloud.png" alt="clouds">
               <img class="mountain" src="images/mountain.png" alt="Mountain">
               
           </div>

           <div class="content-2">

           </div>
           <div class="content-3">

           </div>
       </div>


</body>

CSS:-

body{
    margin:0px; 
    padding:0px;
    text-align: center  ; 
}
.content-1{
    background-color: rgb(198, 243, 228);
}


.bottom-cloud{
    position:absolute;
   
}

.mountain{
    /* position:absolute; */
}

.content-2, .content-3{
    width:200px;
    height:200px;
}
.content-2{
    background-color: red;

}

.content-3{
    background-color: yellow;
}
pattrick james
  • 95
  • 4
  • 1
    Actually technically neither one stayed inside the container. It just seems that way because the container didn't resize when you moved the cloud since the other cloud is the same height, while the mountain is large and on its own line, so when it is removed from the container, the container shrunk considerably. Honestly this question is far too broad for a single SO question. You need some more fundamental understanding of how `position` works, which is beyond the scope of asking a single question on SO. – Liftoff Feb 22 '22 at 07:30

0 Answers0