CSS horizontal absolute position and vertical relative position

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 1

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.