css - display div above another one

Question

I'm currently working on a solution, where I have to display an error message above (z-index) a section.

The section has it css overflow attribute set to scroll or hidden. This is causing the error message to be truncate on the left side.

I would very like to keep the DOM as it is. Is there a way to display the div for the error message "above" the blue div.

Js fiddle

HTML :

<div>
<div id="div1">
    div 1
</div>
<div id="div2">
    div 2
    <div id="msgErreur">
        Error
    </div>
</div>
</div>

**CSS : **

#div1 { 
width : 48%;
border: 1px solid red;
height: 150px;
float:left;
}

#div2 { 
width : 48%;
border: 1px solid blue;
height: 150px;
float:right;
overflow-y:scroll;
 }

#msgErreur {
background:#942911;
color:white;
top:30px;
left: -10px;
width : 150px;
height : 30px;
position:relative;
z-index:5;
}

Answer 1

edit: 2 ways of achieving this. Relatively positioned (extra) element in an absolutely positioned one or (new) an absolutely positioned element and transform.

You can achieve this by using position: absolute on the container of the error message and an extra div relatively positioned between container and message.
The DOM is slightly modified but without moving whole blocks of code, maybe it's OK with your requirements?

Relevant HTML:

<div id="msgErreur">
    <div>Error</div>
</div>

Relevant CSS:

#msgErreur {
    position: absolute;
    z-index: 5;
    color: white;
}
#msgErreur > div {
    position: relative;
    top: 30px; left: -10px;
    width: 150px; height: 30px;
    background: #942911;
}

Fiddle

EDIT: it's 2016 and transform: translate(X, Y) is compatible with a large set of browsers (IE9+ according to caniuse.com). Here's another way of achieving what OP needed, with no extra element needed:

#div1 { 
    width : 48%;
    border: 1px solid red;
    height: 150px;
    float:left;
}
#div2 { 
    width : 48%;
    border: 1px solid blue;
    height: 150px;
    float:right;
    overflow-y:scroll;
}

#msgErreur {
    background:#942911;
    color:white;
    /* top:30px; */
    /* left: -10px; */
    width : 150px;
    height : 30px;
    position: absolute; /* not relative anymore */
    /* z-index:5; It's already stacked above if positioned. Needed if other positioned elements are there (a value of 1 would be enough) */
    transform: translate(-10px, 30px); /* replaces relative positioning (left and top => X and Y) */
}

<div>
    <div id="div1">
        div 1
    </div>
    <div id="div2">
        div 2
        <div id="msgErreur">
            Error
        </div>
    </div>
</div>

Codepen