CODEWITHSUNDEEP
javascripthtmlcss
George Greene
George Greene

Reputation: 7

Issue with moving images using relative positioning

I am having an issue moving images using relative positioning. Currently, I have 3 images uploaded into my container and only one can be moved via css with relative positioning. The other two, I have tried using the code below to move, but they stay in the same spot.

Thanks for any suggestions!

 <img class="first" src="assets/icons/Astro_Letter_Logo.png" alt="Astro Letter Logo" width="100" height="250">
      
      
      <img class="second" src="assets/icons/Mail_It_Button.png" alt="Send It" width="350" height="300">
      
    <img class="third" src="assets/icons/Address_Found!_Click _to_Launch.png" alt="Send It" width="350" height="300">

CSS Below

img.first {
      position: relative;
      top: -75px; left: -1px;
     
}

img.second {
    position: relative;
    top: -198; left: -35;
}

img.third {
    position: relative;
    top: -198; left: -35;
}

Upvotes: 0

Views: 38

Answers (2)

Ahsan Roomi
Ahsan Roomi

Reputation: 121

you can acheive it by adding a relative class outside the images and wrap images inside the relative class

HTML

<div class="relative">

 <img class="first" src="assets/icons/Astro_Letter_Logo.png"
 alt="Astro Letter Logo" width="100" height="250">
          
 <img class="second" src="assets/icons/Mail_It_Button.png" alt="Send
 It" width="350" height="300">
          
 <img class="third" src="assets/icons/Address_Found!_Click
 _to_Launch.png" alt="Send It" width="350" height="300">
</div>

CSS

    .relative{
        position: relative;
    }
    .relative img{
        position: absolute;
    }
    .relative img:nth-child(1) {
        top: -75px; left: -1px;
       
    }
    
    .relative img:nth-child(2) {

      top: -198px; left: -35px;
    }
    
    .relative img:nth-child(3) {

      top: -198px; left: -35px;
    }

Upvotes: 1

Shavlego Botchorishvili
Shavlego Botchorishvili

Reputation: 61

Add pixels to all top and left values.

top: -75px; left: -1px;

Upvotes: 1

Related Questions