Css Position Property

Question

It's the image without using position property

.Brand-image {
   width: 55%;
   transform: rotate (25deg);
   margin-left: 20%;
   position: absolute;

But after applying above position property it's size increases

Answer 1

Your width is being calculated as a percentage of the parent width.

When you change the position to absolute, the bounding element becomes the page body, so the width is calculated as a percent of the body width.

Using absolute positioning always leads to difficulty.

Answer 2

You have to make the parent position: relative;. Then the image will take 55% width of its relative parent div.