How to get a parent element to appear above child

Question

I have two nested CSS elements. I need to get the parent to be on top, that is, above in z-axis, of the child element. Just setting z-index is not sufficient.

I can't set a negative z-index on the child, that'll set it to below the page container on my actual page. Is this the only method?

http://jsbin.com/ovafo/edit

.parent {
  position:  relative;
  width: 750px;
  height: 7150px;
  background: red;
  border: solid 1px #000;
  z-index: 1;
}
.child {
  position: absolute;
  background-color: blue;
  z-index: 0;
  color: white;
  top: 0;
}
.wrapper
{
  position: relative;
  background: green;
  z-index: 10;
}

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

score 86 · Answer 1 · edited Feb 09 '17 at 14:35

86

Set a negative z-index for the child, and remove the one set on the parent.

.parent {
    position: relative;
    width: 350px;
    height: 150px;
    background: red;
    border: solid 1px #000;
}
.parent2 {
    position: relative;
    width: 350px;
    height: 40px;
    background: red;
    border: solid 1px #000;
}
.child {
    position: relative;
    background-color: blue;
    height: 200px;
}
.wrapper {
    position: relative;
    background: green;
    height: 350px;
}

<div class="wrapper">
    <div class="parent">parent 1 parent 1
        <div class="child">child child child</div>
    </div>
    <div class="parent2">parent 2 parent 2
    </div>
</div>

https://jsfiddle.net/uov5h84f/

edited Feb 09 '17 at 14:35

TylerH

20,799
66
75
101

answered Nov 27 '09 at 01:57

Alan Haggai Alavi

72,802
19
102
127

13

Thanks, but I can't set a negative z-index on the child, that'll set it to below the page container on my actual page. Is this the only method? – Jourkey Nov 27 '09 at 02:42
May be you can experiment by setting z-index to other elements in the page and finally get the order in which you want them to be displayed. – Alan Haggai Alavi Nov 27 '09 at 03:01
2

As a rule of thumb, don't use z-index on your layout. Use it only for very specific scenarios like in this case and you will find it easier to manage. – Jaryl Jul 01 '10 at 10:30
*[Toskan](http://stackoverflow.com/users/533426/toskan)*: Why do you have to comment when you have nothing of value to add? – Alan Haggai Alavi Nov 15 '13 at 16:27
2

@Toskan : This solution works well if you set up the situation where the parent has no z-index but further up the DOM somewhere you have a z-index set, or you don't mind the child existing below the html element in the stacking order. Learn; experiment; your problem is easily solved by this answer but you didn't give it a chance because you didn't learn what was actually happening in this answer and expected it to work right out of the box. – TorranceScott May 20 '14 at 18:55
@TorranceScott looking at zielu1 answer I actually understand. Because he posted some code – Toskan May 20 '14 at 21:28
The question clearly asks how to get the parent above the child. You posted a fiddle of the child being above the parent. -1. – KJ Tsanaktsidis Aug 13 '15 at 10:47
**[KJ Tsanaktsidis](http://stackoverflow.com/users/200426/kj-tsanaktsidis)**: The answer was posted in November, 2009 and the fiddle was long lost and edited by an anonymous user on October, 2014. You did not even read my answer. You happened to have just clicked on an outdated fiddle which does not even have `z-index` anywhere. **Read the answer** before you jump the gun. – Alan Haggai Alavi Aug 15 '15 at 09:23
2

There is amazing article about z-index: https://philipwalton.com/articles/what-no-one-told-you-about-z-index/ – Krzysiek Feb 01 '17 at 02:57

score 66 · Answer 2 · edited Nov 07 '22 at 21:40

66

Fortunately a solution exists. You must add a wrapper for the parent and change z-index of this wrapper, for example 10, and set z-index for the child to -1:

.parent {
    position: relative;
    width: 750px;
    height: 7150px;
    background: red;
    border: solid 1px #000;
    z-index: initial;
}

.child {
    position: relative;
    background-color: blue;
    z-index: -1;
    color: white;
}

.wrapper {
    position: relative;
    background: green;
    z-index: 10;
}

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

edited Nov 07 '22 at 21:40

Ingmar

2,361
3
19
33

answered Apr 14 '12 at 18:39

zielu1

1,308
11
17

8

http://jsfiddle.net/sidonaldson/a9wQJ/ – sidonaldson Sep 06 '13 at 15:21
Not working in Chrome 61 – sol Oct 10 '17 at 08:47

score 9 · Answer 3 · answered May 15 '14 at 12:20

Some of these answers do work, but setting position: absolute; and z-index: 10; seemed pretty strong just to achieve the required effect. I found the following was all that was required, though unfortunately, I've not been able to reduce it any further.

HTML:

<div class="wrapper">
    <div class="parent">
        <div class="child">
            ...
        </div>
    </div>
</div>

CSS:

.wrapper {
    position: relative;
    z-index: 0;
}

.child {
    position: relative;
    z-index: -1;
}

I used this technique to achieve a bordered hover effect for image links. There's a bit more code here but it uses the concept above to show the border over the top of the image.

http://jsfiddle.net/g7nP5/

score 4 · Answer 4 · answered Nov 27 '09 at 18:37

4

You would need to use position:relative or position:absolute on both the parent and child to use z-index.

answered Nov 27 '09 at 18:37

Divya Manian

1,927
11
16

Thanks for that, I updated the example, doesn't seem to help. – Jourkey Nov 29 '09 at 04:55
sorry, I didnt see the full nature of your request. you can definitely NOT set the child element behind the parent. You can only do so for sibling elements. – Divya Manian Nov 29 '09 at 15:02

score 3 · Answer 5 · edited May 23 '17 at 11:47

Cracked it. Basically, what's happening is that when you set the z-index to the negative, it actually ignores the parent element, whether it is positioned or not, and sits behind the next positioned element, which in your case was your main container. Therefore, you have to put your parent element in another, positioned div, and your child div will sit behind that.

Working that out was a life saver for me, as my parent element specifically couldn't be positioned, in order for my code to work.

I found all this incredibly useful to achieve the effect that's instructed on here: Using only CSS, show div on hover over <a>

score 3 · Answer 6 · answered Nov 29 '09 at 05:04

Since your divs are position:absolute, they're not really nested as far as position is concerned. On your jsbin page I switched the order of the divs in the HTML to:

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

and the red box covered the blue box, which I think is what you're looking for.

score -15 · Answer 7 · answered Oct 02 '11 at 16:35

-15

style:

.parent{
  overflow:hidden;
  width:100px;
}

.child{
  width:200px;
}

body:

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

answered Oct 02 '11 at 16:35

OBL

367
1
4
13

1

this doesnt do what the OP wants – jeremy Oct 15 '12 at 11:45
5

Not even related to the question – Jack M. Oct 10 '13 at 22:58

How to get a parent element to appear above child

7 Answers7

Linked

Related