How to position an image anywhere with CSS

We can position an image anywhere inside a parent container. We usually align an image horizontally to left, center and right by using different CSS tricks. But by using position:absolute, we can align an image both horizontally and vertically; not only to center or right but in any position- near top, bottom, left or right edge of a container.

Noted, in this way, not only image, we can also set position of other html elements like p, h, div and so on.

So no more ado. Let’s start to move on practical ground.

How position:absolute works to position an image

To make position:absolute work to position an image anywhere, do the followings:

• Take a container div.
• Style the div with position:relative.
• Style the div with width and height value. You can also set other property if you wish.
• Take img element inside the div.
• Style the img with position:absolute.
• To fix definite position of img; style the image with top, bottom, left and right property. Noted, set value in any one of Top and Bottom property. Also set value in any one of Left and Right property.
• Image width and height value must be lower than that of div.
• Set other property:value with img if you wish.

Position 1: Align image near top-right

To keep things simple, we’re using inline CSS. First, let’s style the container div:

<div style="position:relative;
width:60%;
height:250px;
border:5px groove darkgreen;"> 
</div>

Now set the image attributes with style:

<img src="https://www.netplanter.com/wp-content/uploads/2020/02/LOTUS-2.jpg" 
style="position:absolute;
width:100px;
height:100px;
top:30px;
right:0;">

Now accumulate the codes:

<div style="position:relative;
width:60%;
height:250px;
border:5px groove darkgreen;"> 
<img src="https://www.netplanter.com/wp-content/uploads/2020/02/LOTUS-2.jpg" 
style="position:absolute;
width:100px;
height:100px;
top:30px;
right:0;">
</div>

See output

Position 2: Align image near bottom-right

CODE

<div style="position:relative;
width:60%;
height:250px;
border:5px groove darkgreen;"> 
<img src="https://www.netplanter.com/wp-content/uploads/2020/02/LOTUS-2.jpg" 
style="position:absolute;
width:100px;
height:100px;
bottom:0;
right:0;">
</div>

OUTPUT

Position 3: Align image near bottom-left

CODE

<div style="position:relative;
width:60%;
height:250px;
border:5px groove darkgreen;"> 
<img src="https://www.netplanter.com/wp-content/uploads/2020/02/LOTUS-2.jpg" 
style="position:absolute;
width:100px;
height:100px;
bottom:40px;
left:30px;">
</div>

OUTPUT

Position 4: Align image near top-left

CODE

<div style="position:relative;
width:60%;
height:250px;
border:5px groove darkgreen;"> 
<img src="https://www.netplanter.com/wp-content/uploads/2020/02/LOTUS-2.jpg" 
style="position:absolute;
width:100px;
height:100px;
top:20px;
left:20px;">
</div>

OUTPUT

Position 5: Align image on center horizontally and vertically

CODE

<div style="position:relative;
width:250px;
height:250px;
border:5px groove darkgreen;"> 
<img src="https://www.netplanter.com/wp-content/uploads/2020/02/LOTUS-2.jpg" 
style="position:absolute;
width:100px;
height:100px;
top:75px;
left:75px;">
</div>

OUTPUT

Hope you can position the image in any other places beyond the shown examples by using the defined rules.

Comment, please!!