3

How to bring parent div front?

My html:-

<div class="main">
 <div class="parent">
    <div class="child"></div>
 </div>
</div>

My css :-

.main{
 width : 400px;
 height: 400px;
 background : green;
 z-index: 10; 
}
.parent{
 width: 100px;
 height: 100px;
 position: relative;
 background: yellow;
 z-index: 5;
} 
.child{
 width : 200px;
 height: 200px;
 background: red;
 z-index : -1;
}

My js fiddle : http://jsfiddle.net/gautm5154/xPvHf/

Gautam Kumar
  • 707
  • 1
  • 10
  • 27

5 Answers5

5

The parent can never be in front of an element it contains.

Are you trying to do this?

http://jsfiddle.net/Zc9Ch/

The css would be more like this

.main{
        width : 400px;
        height: 400px;
        border :1px solid black;            
        position:relative;
    }
    #bottom{
        width: 100px;
        height: 100px;
        position: absolute;
        background: #e3e3e3;
        z-index: 1;
    }
    #top {
        width : 200px;
        height: 200px;
        background: red;
        z-index:2;
        position:absolute;
    }

HTML for completeness

<div class="main">
    <div id="top"></div>
    <div id="bottom""></div>
</div>

Obviously in your examplethe parent and child css classes don't really make sense, i've changed to ids in the answer.

sambomartin
  • 6,663
  • 7
  • 40
  • 64
  • @GautamKumar Check my answer out, it is possible but as I said this is how I would do it too. – Ruddy Jul 07 '14 at 10:19
1

sambomartin's answer is how I would do it but I will just show it is possible to get parent to show above the child element.

CSS:

.main {
    width : 400px;
    height: 400px;
    border :1px solid black;
}
.parent {
    width: 100px;
    height: 100px;
    background: #e3e3e3;
    z-index: 1;
}
.child {
    width : 200px;
    height: 200px;
    background: red;
    z-index: -1;
    position: relative;
}

DEMO HERE

Ruddy
  • 9,795
  • 5
  • 45
  • 66
  • Check this fiddle [link](http://jsfiddle.net/gautm5154/xPvHf/8/).Why child is appearing below main? – Gautam Kumar Jul 07 '14 at 10:23
  • @GautamKumar What about it? – Ruddy Jul 07 '14 at 10:23
  • Why child is appearing below main? – Gautam Kumar Jul 07 '14 at 10:25
  • @GautamKumar [Fixed](http://jsfiddle.net/Ruddy/xPvHf/9/) Like I said I wouldn't do it this way. Im just proving it is possible. IT was doing that because the child is set to -1 z-index. So its behind the background. – Ruddy Jul 07 '14 at 10:25
  • main div should have lower zindex then child div to appear? – Gautam Kumar Jul 07 '14 at 10:26
  • @GautamKumar I wouldn't look to much into this as its not really necessary. When you have a better handle on how z-index works come back to this answer and see whats happening. For now stick to the other answer as it is just a better way. – Ruddy Jul 07 '14 at 10:28
0

HTML:

<div class="main">
    <div class="parent"></div>
    <div class="child"></div>
</div>

CSS:

.main {
    width : 400px;
    height: 400px;
    background : green;
    z-index: 10;
}
.parent {
    width: 100px;
    height: 100px;
    position: relative;
    background: yellow;
    z-index: 5;
}
.child {
    width : 200px;
    height: 200px;
    background: red;
    z-index : -1;
    margin: -100px 0 0;
}
Ruddy
  • 9,795
  • 5
  • 45
  • 66
Vaibhav Singhal
  • 511
  • 1
  • 4
  • 25
  • This is terrible. What – Ruddy Jul 07 '14 at 10:26
  • @Ruddy when you put the background color in the css then your div disapper :P checkout with this css .main { background-color: green; border: 1px solid black; height: 400px; width: 400px; } .parent { background: none repeat scroll 0 0 yellow; height: 100px; width: 100px; z-index: 1; } .child { background: none repeat scroll 0 0 red !important; height: 200px; position: relative; width: 200px; z-index: -1; } – Vaibhav Singhal Jul 07 '14 at 10:29
  • Throwing code at here isn't good. Should explain a little bit of what you are doing. As your code doesn't make it clear, you also have no demo. – Ruddy Jul 07 '14 at 10:33
0

Try this:

.main {
    width : 400px;
    height: 400px;
    border :1px solid black;
}
.parent {
    width: 100px;
    height: 100px;
    background: #e3e3e3;
    z-index: 1;
}
.child {
    width : 200px;
    height: 200px;
    background: red;
    z-index: -1;
    position: relative;
}

By the way for z-index to work (here in .main) You need to set position either to relative, fixed or absolute.

Finally here is a jsfiddle to show you it: http://jsfiddle.net/xPvHf/7/

Valentin Mercier
  • 5,256
  • 3
  • 26
  • 50
0

I have added opacity to make continuity

.main {

width : 400px;
height: 400px;
border :1px solid black;
background-color:#000000;
opacity:.19;
filter: alpha(opacity=19);
-moz-opacity:.19;
z-index:1;

}

.parent {

width: 100px;
height: 100px;
background: #000000;
z-index: -1;

}

.child {

width : 200px;
height: 200px;
background: red;
z-index: -1;
position: relative;

}

http://jsfiddle.net/shivassmca/vpHB9/

Siva.Net
  • 1,398
  • 1
  • 9
  • 3