CSS - Parent's Position Is Absolute and Child's Position Is Relative and Vice Versa

css - parent's position is absolute and child's position is relative and vice versa

Read more about absolute, relative, and fixed position and how they differ here, but I'll try to answer your question about relationships specifically.

position: absolute will position that element to its nearest parent with a position other than static. Static is the default for everything.

position: relative is a little weird because it really affects that element's children, not its own position. It's just saying to its child elements, "position yourself relative to me if you have position: absolute." A position of fixed or absolute does the same thing (meaning its positioned children will position themselves relative to its boundaries), but these styles also affect their own position on the page. An element with position: relative won't look any different, but its children might.

So consider a situation like this:

<div class="parent">
     <div class="child">
           <div class="grandchild"></div>
     </div>
</div>

If grandchild has position: absolute, it will position itself relative to the browser window because there is no parent with a position other than the default of static.

If parent also has position of relative, absolute, or fixed, grandchild will position itself relative to the boundaries of parent.

However, if child also has a position of relative, absolute, or fixed, the grandchild will position itself relative to child's boundaries, because it is the nearest parent with a position other than static.

In summary, relative affects an element's children, while absolute and fixed affect the element itself as well as its children.

And remember that position: fixed bypasses all relative and absolute parents and always positions itself relative to the browser window.

Is there a parent child relationship between absolute and relative positioning in CSS?

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.

Padding between relative and absolute positions

When an element is set to position:absolute, its containing box is the parent's padding box (the box around the padding). The result in your example is correct.

jsFiddle

You can probably do this to get the result you want, and width:calc(100% - 100px) on the parent doesn't seem to be necessary in your example.

#children:hover {
  position: absolute;
  top: 0;
  left: 0;
  right: 100px; /* the same value as parent's right padding */
  width: auto; /* reset to default, depending on 'left' and 'right' values */
}

EDIT

OP actually has two absolute divs inside, using calc() can help.

jsFiddle

#parent:hover .children {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(50% - 50px);
}
#parent:hover .children:nth-child(2) {
  left: calc(50% - 50px);
}

But, the easiest way would be adding an additional container to the parent, and set the padding and background on it, rest of style unchanged.

jsFiddle

<div id="container">
  <div id="parent">
    <div class="children"></div>
    <div class="children"></div>
  </div>
</div>

#container {
  padding-right: 100px;
  background: pink;
}
#parent {
  height: 100vh;
  position: relative;
}

CSS absolute position orients on sibling rather than parent

To clarify:

"I have always thought that if I position an element absolutely it would
be positioned relative to it's parent element"

Nope. If an element has position: absolute;, it is positioned relative to the nearest parent in the DOM chain that has position: relative; or position: absolute; specified on it. If no parents have it (ie. they are all position: static, which is the default), then it is positioned relative to the document (page).

When using position: absolute, always:

Be aware of what parent you want it positioned relative to, and make sure that parent has position: relative; on it.
Specify one or more of the top/right/bottom/left attributes on the absolutely positioned object.

HTML: relative position

Absolutely positioned element are positioned relative to their nearest positioned ancestor.

So you specify position: relative on the div so that it's the container your absolutely positioned button get's moved with respect to. Otherwise it would be some other ancestor or the body of the page.

See https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block.

If the position property is absolute, the containing block is formed
by the edge of the padding box of the nearest ancestor element that
has a position value other than static (fixed, absolute, relative, or
sticky).

why is relative positioned element starting from top corner of window?

`position:absolute`

...elements have their relational positioning attributes (i.e. top, bottom, right,...) calculated from their closest ancestor with a position value other than static (which is default). If no such ancestor exists, <body> will be used.

`position:fixed`

...elements have their relational positioning attributes calculated from their closest viewport (by default: <body>, but a 3d transformed element acts as viewport for its children - see Unfixing fixed elements with transforms).

Both of the above place the element, including all its children, out of the content flow of their parent. All subsequent elements in DOM will act like this element and its children do not exist in DOM.

`position:relative`

...elements have their relational positioning attributes calculated from the position they would normally occupy in their parents content flow if no relational positioning attribute was applied. Unlike fixed and absolute, relative position does not place the element out of its parent contents flow.

Why does an absolute position element wrap based on its parent's right bound?

Doesn't position: absolute remove an element from the flow?

This has nothing to do with the flow. The width of an element always respects its containing block. If the element is absolutely positioned, then its dimensions can be constrained by top, right, bottom and left, but as long as its width is auto then it must still be constrained to the width of its containing block (making it no different from in-flow block boxes in that respect), which in your case is its absolutely-positioned parent. There isn't really any other element whose constraints the absolutely-positioned element could size itself with respect to without compromising the flow of its text.

For the specifics of how this width is calculated, refer to the spec.

Issue with absolute/relative positioning

If you want any overflowing content on #child to be hidden, use:

#parent {
  overflow: hidden;
}

If you still want to be able to see all the content in #child, you can contain it in a scrollbar. Then the height of #child won't clash with the height of #parent.

#parent {
  overflow: auto;
}

Edit:

If you want #parent's height to stretch with #child, #child cannot be absolute positioned. Take that off, and it will work. If you want height to be at least 400px, then you can use:

#parent {
   min-height: 400px;
}

See fiddle: http://jsfiddle.net/VYrLh/

Absolute DIVs position().left in respect to immediate relative parent?

p1, since its child's closest non-statically positioned ancestor.

CSS - Parent's Position Is Absolute and Child's Position Is Relative and Vice Versa