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
withposition:relative
. - Style the
div
withwidth
andheight
value. You can also set other property if you wish. - Take
img
element inside thediv
. - Style the
img
withposition: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
andheight
value must be lower than that ofdiv
. - 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!!