How to have a div fixed only inside one div and change to position: absolute when it starts overlapping with following div
<p>Say I have three <code>divs</code> like following:</p>

<pre><code>&lt;div class="wrapper"&gt;
    &lt;div class="container"&gt;
       container1
        &lt;div class="element"&gt;
            fixed
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="container2"&gt;
      container2
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>I want div: <code>element</code> to be fixed when it is inside div: <code>container</code>, but its position should become <code>absolute</code> when div: <code>container2</code> becomes visible, it should not overlap with div - <code>container2</code>, but scroll away at that time with div: <code>container</code>.</p>

<p>A pure CSS solution is preferable, but if not possible I may go for a JS or jquery solution. I have created a <a href="http://jsfiddle.net/mimani/zq0kkkcx/" rel="nofollow noreferrer">fiddle</a> for <a href="http://jsfiddle.net/mimani/zq0kkkcx/" rel="nofollow noreferrer">this</a>, and tried some solution suggested <a href="https://stackoverflow.com/a/18285591/1610034">here</a>, which are not working.</p>