Home/ Questions/Q 5940509
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T15:58:40+00:00

I am new to the world of coding as well as CSS. Having read

  • 0

I am new to the world of coding as well as CSS. Having read a number of articles regarding relative and absolute positioning, my understanding is as follows. However, I am unsure if an absolute position should be the child of a parent relative position or vice versa.

  • There are 4 position properties, that is, static, relative, absolute and fixed.
  • If an element has a relative position it is still part of the normal flow of the document. However, it has the ability to be offset by the properties top, right, bottom and left.
  • It also is able to be given a z-index value and is automatically positioned above static elements
  • It also provides a method of containing child elements that are part of its code block although I am unsure exactly what this means.

Based on this information, does this mean that elements with the position absolute should be children of elements with the position relative or vice versa or does it not matter?

If it does not matter, when would you make them dependent upon one another e.g. parent-child relationship?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    There is not really a parent-child relationship.

    Relative positioning has nothing to do with absolute positioning. Relative positioning is the same as normal static positioning except that it can be offset top/right/bottom/left, as you explain. The “top/right/bottom/left” values are relative to wherever the element would normally exist in the flow. If you leave out these values, the element is still relatively positioned but it is positioned exactly as if it were statically positioned.

    OTOH, when you use absolute positioning, “parent” elements of the absolutely positioned element do matter.

    This is because of what LaC’s answer explains. With absolute positioning, the “top/right/bottom/left” values are relative to whatever is the nearest parent element to have absolute, relative or fixed positioning. I’ll call this the “reference element.”

    Consider this example fragment:

    <body>
  <div style="width: 50%;">
    <p style="position: absolute; width: 20px; top: 0; right: 0">P</p>
  </div>
</body>

    The div will be left-aligned, static (normal, in the document flow) position, 50% the width of the body. The p will be a 20px-wide box, in the top-right corner of the viewport:

    -------------
|     |   |P|
|     |   --|
| div |     |
|     |     |
|     |     |
-------------

    The viewport is the reference element because there are no other parent elements of the p that have absolute/fixed/relative positioning.

    Now change the div to be relatively positioned:

    <body>
  <div style="position: relative; width: 50%;">
    <p style="position: absolute; width: 20px; top: 0; right: 0">P</p>
  </div>
</body>

    The div will appear exactly the same as before, because no top/right/bottom/left offset has been specified. However, the position of the p will change, even though its style hasn’t.

    That is because, before, the p was aligned to the top-right corner of the viewport, but now there is a closer parent element (the div) with absolute/fixed/relative positioning. So now, the div becomes the reference element and the p will be aligned to its top-right corner:

    -------------
|   |P|     |
|   --|     |
| div |     |
|     |     |
|     |     |
-------------

    So, just know that whenever you use absolute positioning, you have to think about what the reference element in the document will be. And, you can design your stylesheet so that you choose whatever this reference element is, which makes absolute positioning a very useful layout technique.

    • 0