my question is why changing padding in div.container affects div.blueBox? Since blueBox positioning is set to absolute it is taken out of normal flow, and should be positioned with relation to element.

HTML:

```
<body>
        <div class="container">
            <div class="box blueBox"></div> 
        </div>      
        <div class="box greenBox"></div> 

        <h1>Understanding CSS Positioning</h1>
        <p><em>Absolute positioning</em> takes an element out of document flow, meaning the browser acts as if the element has no width and height, and the other elements on the page move up as if it was never there.  The position of the element is then fixed relative to the top level container, or the closest parent with a set positioning.</p>

    </body>

```

CSS:

```
body {
    background-color: #1f1f1f;
    height: 2000px;
    color: #bfbfbf;
}

h1 {
    font-weight: normal;   
}

em {
    color: #dd740b;   
}

.box {
    width: 100px;
    height: 100px;
    margin-bottom: 10px;
}

.blueBox {
    background: #627da0;
    position: absolute;
}

.greenBox {
    background: #5b8054;  
}

.container {
    background: rgba(0,0,0,.4);
    padding: 10px;
}

```

<http://jsfiddle.net/pawelpodsiadly/brdc8dvy/>