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

.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.

CodePudding user response：

You might want to try putting them in a div container that is set to display flex, and then manipulate these images as flex items:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

CodePudding user response：

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;
}