Grow your CSS skills. Land your dream job.

Position problem

  • # October 6, 2012 at 8:47 pm

    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%;
    }
    # October 6, 2012 at 10:12 pm

    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.

    # October 7, 2012 at 9:50 am

    Thanks it really works!

    xpy
    # October 8, 2012 at 3:28 am

    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.

    # October 8, 2012 at 5:24 am

    @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
    # October 8, 2012 at 2:28 pm

    @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”)

    # October 13, 2012 at 11:23 am

    @xpy Thank you for your information ;)

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".