Css - display div over another

Question

I am currently working on a solution where I need to display an error message above the (z-index) section.

The section has a css overflow attribute set to scroll or hidden . This truncates the error message on the left side.

I would really 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 violin

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 to achieve this. Relatively positioned (optional) element in an absolutely positioned one or (new) absolutely positioned element and transform .

You can achieve this by using position: absolute in the error message container and an additional div, relatively located between the container and the message.
The DOM is slightly modified, but without moving entire blocks of code, maybe everything is fine with your requirements?

Relevant HTML :

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

Matching 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 is 2016 and transform: translate(X, Y) compatible with a wide range of browsers (IE9 + by caniuse.com ). Here's another way to achieve what the OP requires without an extra element:

 #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 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