Issue with relative postion when im usigg %

General
1

when I’m using % the position doesn’t move up when scaling sometimes but I checked and the setting is exactly the same. I know I can use px but I messes up my scaling

2

Hey, this is how CSS works, parent element needs to have a fixed height, in order for position relative to have proper calculations in percentages.

Here’s a reply from Chat GPT:

If left and right properties are working with percentages but top and bottom properties have no effect when using percentages (while working fine with pixel values), it suggests that the issue is related to how the height of the element’s containing block is defined or interpreted. Here are some key points to consider:

  1. Undefined or Auto Height: If the parent element (the containing block) does not have a defined height, percentage values for top and bottom cannot be calculated effectively. Unlike width, which often defaults to the full width of the parent container, height is not always explicitly defined and can default to auto, meaning it stretches based on its content.
  2. Height Inheritance: Ensure that the parent container of the element has an explicit height set if you want to use percentages for top or bottom. This can be a specific pixel value (px), viewport height (vh), or any other unit that provides a calculable height. Without a defined height on the parent, percentage-based calculations for top and bottom have no reference point and thus, no effect.
1 Like
3

I tried to use % but it only works sometimes even if all of the parent elements are 100% it wont always work but the moment i change the value to a px value I can use % with relative positioning.