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 · Accepted 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_

#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_

<div id="container">_x000D_
  <div id="box">absolute</div>_x000D_
</div>

_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.

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

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

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

[html] Position an element relative to its container

Examples related to html

Examples related to css

Examples related to positioning