Position problem

[albertdt6]

I recently added a box with CSS. Then I put some information in it and set a position to relative. The problem is that the information in the box moves to left but not to bottom or top. I don’t know which is the problem. Thanks for the help!

Here’s the code:

	#information {  /*This information is in the box*/

position: relative;

top: 10%;  /*This line doesn't work*/

left: 10%;

}

[SgtLegend]

I never use the `left`, `right`, `bottom` and `top` with `position: relative` as you don’t need to, simply using either padding or a margin is sufficient.

[albertdt6]

Thanks it really works!

[xpy]

In order to move from top or bottom with a percentage, the parent element needs to have a defined height. Positioning an element with paddings and margins is not a very good practice because you’ll probably ‘push’ other elements too.

[Paulie_D]

@xpy Positioning an element with a known element (as is the case here) with paddings and margins IS very good practice and much better than absolute positioning.

[xpy]

@Paulie_D I never mentioned “absolute” but anyway…
I don’t really know what is the desired result in @albertdt6 case, but I just believe that if you want to position an element you should use top, right, bottom and left. Margins and paddings are supposed to be just for margins and paddings. But maybe that’s just my opinion.

Just for the info, in case of a percentage margin for top and bottom the value is calculated in relation to the width of the parent element and not the height… [https://developer.mozilla.org/en-US/docs/CSS/margin](https://developer.mozilla.org/en-US/docs/CSS/margin “https://developer.mozilla.org/en-US/docs/CSS/margin”)

[albertdt6]

@xpy Thank you for your information ;)

[Author]

Posts