Position an element relative to its container

Question

I m trying to create a horizontal 100  stacked bar graph using HTML and CSS  I d like to create the bars using DIVs with background colors and percentage widths depending on the values I want to graph  I also want to have a grid lines to mark an arbitrary position along the graph   In my experimentation  I ve already gotten the bars to stack horizontally by assigning the CSS property float  left  However  I d like to avoid that  as it really seems to mess with the layout in confusing ways  Also  the grid lines don t seem to work very well when the bars are floated   I think that CSS positioning should be able to handle this  but I don t yet know how to do it  I want to be able to specify the position of several elements relative to the top-left corner of their container  I run into this sort of issue regularly  even outside of this particular graph project   so I d like a method that s    Cross-browser  ideally without too many browser hacks  Runs in Quirks mode As clear clean as possible  to facilitate customizations Done without JavaScript if possible

User · Answer

Absolute positioning positions an element relative to its nearest positioned ancestor   So put position  relative on the container  then for child elements  top and left will be relative to the top-left of the container so long as the child elements have position  absolute   More information is available in the CSS 2 1 specification

User · Answer

If you need to position an element relative to its containing element first you need to add position  relative to the container element  The child element you want to position relatively to the parent has to have position  absolute  The way that absolute positioning works is that it is done relative to the first relatively  or absolutely  positioned parent element  In case there is no relatively positioned parent  the element will be positioned relative to the root element  directly to the HTML element    So if you want to position your child element to the top left of the parent container  you should do this    parent     position  relative       child     position  absolute    top  0    left  0        You will benefit greatly from reading this article  Hope this helps

User · Answer

I know I am late but hope this helps   Following are the values for the position property    static fixed relative absolute   position   static  This is default  It means the element will occur at a position that it normally would    myelem       position   static      position   fixed  This will set the position of an element with respect to the browser window  viewport   A fixed positioned element will remain in its position even when the page scrolls    Ideal if you want scroll-to-top button at the bottom right corner of the page     myelem       position   fixed      bottom   30px      right   30px      position   relative  To place an element at a new location relative to its original position    myelem       position   relative      left   30px      top   30px      The above CSS will move the  myelem element 30px to the left and 30px from the top of its actual location   position   absolute  If we want an element to be placed at an exact position in the page    myelem       position   absolute      top   30px      left   300px      The above CSS will position  myelem element at a position 30px from top and 300px from the left in the page and it will scroll with the page   And finally     position relative   absolute  We can set the position property of a parent element to relative and then set the position property of the child element to absolute  This way we can position the child relative to the parent at an absolute position    container       position   relative      div-2       position   absolute      top   0      right   0        We can see in the above image the  div-2 element is positioned at the top-right corner inside the  container element   GitHub  You can find the HTML of the above image here and CSS here   Hope this tutorial helps

User · Answer

You have to explicitly set the position of the parent container along with the position of the child container   The typical way to do that is something like this   div parent      position  relative      left  0px      stick it wherever it was positioned by default        top  0px     div child      position  absolute      left  10px      top  10px

User · Answer

You are right that CSS positioning is the way to go  Here s a quick run down   position  relative will layout an element relative to itself  In other words  the elements is laid out in normal flow  then it is removed from normal flow and offset by whatever values you have specified  top  right  bottom  left   It s important to note that because it s removed from flow  other elements around it will not shift with it  use negative margins instead if you want this behaviour    However  you re most likely interested in position  absolute which will position an element relative to a container  By default  the container is the browser window  but if a parent element either has position  relative or position  absolute set on it  then it will act as the parent for positioning coordinates for its children   To demonstrate    x000D   x000D   container   x000D    position  relative  x000D    border  1px solid red  x000D    height  100px  x000D    x000D   x000D   box   x000D    position  absolute  x000D    top  50px  x000D    left  20px  x000D    x000D   lt div id  container  gt  x000D     lt div id  box  gt absolute lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    In that example  the top left corner of  box would be 100px down and 50px left of the top left corner of  container  If  container did not have position  relative set  the coordinates of  box would be relative to the top left corner of the browser view port

[html] Position an element relative to its container

Examples related to html

Examples related to css

Examples related to positioning