Search code examples
htmlcsscss-floatpaddingmargin

How do I move an image anywhere on the screen with CSS?


.image-one {
  padding-left: 600px;
}

.image-two {
  padding: 10px 600px 200px 100px;
}

.image-three {
  padding-left: 600px;
}

I have three PNG images that I am trying to place anywhere I want on the screen. I still don't understand how the whole system works. To move an image up and down, left and right on the screen, I need to use padding or margin, right? I tried with both and I can't figure out how to do it. It doesn't work with float: left; or float: right; either. In a nutshell, the question is: how do you go about moving ANYTHING on the screen and place it wherever you want. Thanks.


Solution

  • You can change it's 'position' according to your needs. if you want to move the image anywhere on the screen then I suggest to this , its just an example.

     .image-one{
       position:absolute;
       left:30px;
       top:10px;
    }