Position an element relative to its container

by

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:

#container {
  position: relative;
  border: 1px solid red;
  height: 100px;
}

#box {
  position: absolute;
  top: 50px;
  left: 20px;
}
<div id="container">
  <div id="box">absolute</div>
</div>

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.

More Related Contents:

  1. Positions fixed doesn’t work when using -webkit-transform
  2. css “left” not working
  3. Prevent an element from covering another [closed]
  4. How to align 3 divs (left/center/right) inside another div?
  5. Styling an input type=”file” button
  6. Why does z-index not work?
  7. CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue
  8. :after and :before CSS pseudo elements hack for Internet Explorer 7
  9. Percent pie chart with css only
  10. Extend bootstrap row outside the container
  11. What is use of ‘initial’ value in CSS?
  12. Use a normal link to submit a form
  13. Removing ul indentation with CSS
  14. Can I stop 100% Width Text Boxes from extending beyond their containers?
  15. Inline tags vs. inline css properties
  16. Remove border from IFrame
  17. Why are my div margins overlapping and how can I fix it?
  18. Draw triangle in corner of div
  19. How to center content in a Bootstrap column?
  20. Flexbox resize and scrollable overflow [duplicate]
  21. How to prevent line break at hyphens in all browsers
  22. Can I override inline !important?
  23. CSS property as SASS mixin value [duplicate]
  24. Preserve line breaks in textarea
  25. How position absolute and fixed block elements get their dimension?
  26. Why is there a default margin on the element? [closed]
  27. set css border to end in a 90 instead of a 45 degree angle
  28. extra space when centering elements using flexbox
  29. Media queries not working inside an iframe
  30. How do I style radio buttons with images – laughing smiley for good, sad smiley for bad?

Leave a Comment