Css Position Property-CodePudding

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

CodePudding user response：

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.

CodePudding user response：

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