Question: I have a centered div. A sub-div (red) should overlap the centered div. That's no problem at all. 

Now I want a div which follows an overlap div (green) to be vertically positioned correctly (after the overlapping one). So is there a possibility to mix absolute and relative positioning?

Here's my code:

HTML:

```
<div id="container">
  blubb
    <div id="overlap">
        Content goes here.
    </div> 
    <div id="after">
        after.
    </div> 
</div>

```

CSS:

```
#container{
    width:100px;
    height:400px;
    background:#ccc;
    margin:0 auto;
}

#overlap{
    position:absolute;
    left:0;
    right:0;
    height:100px;
    background:red;
    color:white;
}

#after{
    position:relative;
    height:100px;
    background:green;
    color:white;
}

```

Here's also a link to jsfiddle:

<http://jsfiddle.net/XLfkn/>

Answer: 
No, there's nothing like this in the latest version of CSS. Absolute positioning is all or nothing. You can't have something be absolutely positioned for its horizontal position but not its vertical.

There are a few alternatives depending on what your needs are. One way is to simply put your "after" inside your "overlap":

```
<div id="container">
  blubb
    <div id="overlap">
        Content goes here.
        <div id="after">
            after.
        </div> 
    </div> 
</div>

```

If you need separate borders and background colors, simply wrap "Content goes here." in another div, like this:

```
<div id="container">
  blubb
    <div id="overlap">
        <div id="before">
            Content goes here.
        </div>
        <div id="after">
            after.
        </div> 
    </div> 
</div>

```

You can absolutely position `#overlap` and have `#before` and `#after` either `fixed` or `relative`. You need to essentially split your `#overlap` styles so that some stay on `#overlap` but things like background get moved to `#before`.
Since in your example `overlap` has a fixed height you could offset `after` the same amount:

```
#after{
    position:relative;
    height:100px;
    background:green;
    color:white;
    margin-top:100px;
}

```

e.g.: <http://jsfiddle.net/XLfkn/14/>

Of course if `overlap` is going to have a dynamic height this won't work.