css - Stretching an element outside of its parent -

There are 3 divs in my body: one container, one parent, and one child.
I am trying to raise the child outside his parents to the left.
But if I do this with the position: absolute , then the parent will not spread to the desired height ...

Status: static

status: complete

a Using margin-left: -20px will not do either: In the end, I will have other nested parents and they will need all children To expand to the outer left.

His code has so far:

  #container {position: absolute; Width: 300px; }. Parent {margin-left: 20px; }. Child {padding: 30px; }  

Is there any way to do this in pure CSS?

Edit: is my HTML code so you can see how parents will be nested in each other:

  & lt; Div id = "container" & gt; & Lt; Div class = "parent" & gt; & Lt; Div class = "hair" & gt; & Lt; / Div & gt; & Lt; Div class = "parent" & gt; & Lt; Div class = "hair" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "parent" & gt; & Lt; Div class = "hair" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt;  

Edit 2: I have to point out that there are several (infinite) levels of nesting in my code. The sample above is just a piece of html.

Why not only use

  .child {height: 60px; Status: Relative; Left: -20px; }  

You can use the status: relative , so that content beyond parental limits can be justified, as long as Overflow: hidden not set to parent.