Using Z-Index to Get Div Above Another Div

Using z-index to get div above another div

You can add position: relative to both divs and create stacking context

div {  width:100px;  height: 100px;}
.div1 {  background: red;  z-index: 2;  position: relative;}
.div2 {  background: blue;  margin-top: -15vh;  z-index: 1;  position: relative;}

<div class="div1"></div><div class="div2"></div>

CSS: Why is z-index not making one div appear on top of another div?

Higher z-index is not enough. Both elements must have position defined and it should be absolute and / or relative.

I would go with relative for parent and absolute for child (then also use top / left to position). Next play with z-index for both, where higher value is for the child (or the layer that must be on top).

In most cases z-index should go together with position but not always. Thanks to Michael_B for pointing that out.

Show onclick hidden div above another div using z-index

ok so if i understand your question you need to make appear an hidden menu by clicking on a visible part manipulating the z-index.

To do this in javascript you can manipulate the z-index using

var elem = document.getElementById('yourid');
elem.style.zIndex = 0;

You can triggered the onclick event to a function that called something similar to what i purpose above.

bootstrap 3 z-index place a div over another div

Let's try this! I hope it can help! :)

<div class="col-lg-12" style="background: red none repeat scroll 0% 0%; position: absolute; left: 0px; top: 0px; height: 100%; z-index: -1; right: 0px; margin: 0px auto;"> </div>

Floating div over other divs not working with z-index

#white_box_outer
{
width: 70%;
min-height: 450px;
margin-left: 200px;
position: absolute;
float: left;
background-color: #ccc;
}

Set your white_box position to absolute and then adjust it's height and width, according to your goals.

How to place a div over another

You need to use z-index and position:absolute CSS properties. Additionally you need to also position your second DIV (which is on top of the other) by giving some values to top and left CSS attributes. Following is an example:

#first{
    position: absolute;
    z-index:1;
}
#second{
    position: absolute;
    z-index:2;
    top: 50px;
    left: 50px;
}

See this JSfiddle demo

css - display div above another one

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>

Using Z-Index to Get Div Above Another Div