Search code examples
cssposition

more exact position css

I have a position: element in css, is there a more exact version that uses px like, for example,

 position: 100px left;

is there any similar way to do that in css?

Solution

  • Position property

    The position property specifies the type of positioning method used for an element (static, relative, fixed or absolute).

    The position property specifies the type of positioning method used for an element.

    There are four different position values:

    • static
    • relative
    • fixed
    • absolute

    Position shorthand

    No short-hand exists to combine all of position-dependent property values. These are all different properties, unlike, for instance background, which has color, image, position and repeat instructions and as such can be coalesced into a short-hand form:

    Normal form

    #element{
    background-color: #ffffff;
    background-image: url("bg_img.png");
    background-repeat: no-repeat;
    background-position: right top;
    background-attachment: fixed;
}

    Shorthand form

    #element{
    background: #ffffff url("bg_img.png") no-repeat right top;
}

    Answering your question

    If you are after a method to position an element such that it has 100px space at the left, you may do that like these (which depends on your structure and with the provided information it is hard to say how, so you may provide more information for an exact situation):

    #element{ margin-left: 100px; }

    or

    #element{ padding-left: 100px; }

    or

    #element{ position: absolute; left: 100px; }

    or

    #element{ position: relative; left: 100px; }