Z-Index and Relative/Absolute Positioning

Z-Index and Relative/Absolute Positioning

If I recall correctly the precedence order of z-indices is something like this:

• canvas (where the element is drawn / parents drawable area)
• bg images
• z-index: -1
• default (0)
• z-index: 1+

When you give any child element a z-index of -1, it won't go below the parent's background because of the parent's precedence.

Here is your solution (just tried on firebug and it works):

1. Remove the bg image from #menu and add a separate div under the ul.menu before the li's.
2. Give the css below to this div.
3. Now give all those brush strokes a z-index smaller than -1. -2 works.

And that should be it.

CSS:

position:absolute;
top:0;
bottom:0;
left:0;
right:0;
z-index:-1;
background: url(...);

I know it's not that much semantic but, hey it works, right? :P

z-index not working with position absolute

The second div is position: static (the default) so the z-index does not apply to it.

You need to position (set the position property to anything other than static, you probably want relative in this case) anything you want to give a z-index to.

Using z-index with relative and absolute positioning

I doubt this is exactly what you want to achieve, but it should be a good starting point. There is a few issues with your CSS. I will cover a few of them.

text-align: centre; should be text-align: center;. Although that only works with inline and inline-block elements.

There is no such thing as position:center-left;. The posititon CSS property online accepts static|absolute|fixed|relative|sticky|initial|inherit.

You should use position:absolute when you want to position elements on top of one another or just to position it outisde of the document flow.

position:relative; is used on a parent element of an element with position:absolute. The absolute positioned element would then position itself relative to that parent element. Adjustments to the position absolute element can be done with top,right,bottom,left CSS properties.

Look in to the CSS styles of height:0;padding-bottom:75%. Varying the padding bottom allows you to retain a divs aspect ratio when scaled.

.container {  width:80%;  position:relative;  height:0;  padding-bottom:75%;}.fire, .snow, .container img {  width:100%;  position: absolute;  top:0;  left:0;  right: 0;}.snow {  z-index:1;}.fire {  z-index:2;}.container img {  z-index:3;  max-width:100%;    height:auto;}

<div class="container">  <img src="https://i.postimg.cc/qByLfxBJ/pic3.png">  <video class="snow" autoplay controls>    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">  </video>  <video class="fire" autoplay controls>    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">  </video></div>

z-index an absolutely positioned element under a relatively positioned one

Edit: I was misinformed, negative indexes were introduced in CSS2.1. This solution is still correct, though my comments about it being a hack are not.

Child elements, even if absolutely positioned can't be below their parent element unless you use a hack.

The hack is to remove the z-index property from the parent and give the child element a negative z-index

http://jsfiddle.net/uZdy3/1/

div.layer01 {
    background-color: blue;
    position: relative;
}
div.layer01:after {  /* This is the tail of the bubble */
    display: block;
    background-color: red;
    content: '\00a0';
    width: 30px;
    height: 30px;
    position: absolute; 
    right: 20px;
    top: 50px;
    border: 3px #fff solid;
}    

/* This should be behind the tail and the blue box (bubble) */
div.layer01 div.layer02 { 
    background-color: green;
    width: 320px;
    height: 125px;
    display: block;
    position: absolute; 
    z-index: -5;
}

It would be much better to refactor your layout to avoid this hack, though.

CSS - Z-index is not working with positions relative and absolute

The problem is that you're establishing a stacking context on .menu_wrapper when you set z-index: 999. When a stacking context is established, you cannot position a descendant element behind an ancestor.

Remove z-index: 999 from .menu_wrapper:

.menu_wrapper {
  position: relative;
  /* z-index: 999; << remove */
  height: 70px;
  width: 600px;
  background-color: blue;
}

Then change the z-index on .sub-menu from 1 to a negative number such as -1:

Updated Example

.sub-menu {
  position: absolute;
  z-index: -1;
  margin-top: -200px;
  margin-left: -132px;
  padding: 15px;
  padding-top: 20px;
  background-color: red;
  transition: all 1s ease-in-out;
}

z index and position relative

You are simply floating them next to one another. Apply left to the bottom div:

#bottom { left: -100px; }

What this will do is "position" the bottom div under the top one. Applying relative position by itself won't do anything, you need to start moving the target element around to see the stacking effect.

If you are wondering about absolute positioning, it works differently. Absolute positioning takes the element out of document flow (meaning it won't affect the layout of other elements), and by default puts it at the top left of its first ancestor that doesn't have a value of position:static, so both your elements stacked on top of each other.

CSS: z-index not working inside a position:relative container

z-index should be -1 this should work:

.container {  position: relative;  top: calc(100vh * 0.4);  left: 0;  width: 100%;}
.image {  z-index: 1;}
.wall-panel {  width: 100%;  background-color: red;  height: 200px;  position: absolute;  top: 0;  z-index: -1;}

<div class='container'>  <img class='image' src='http://lorempixel.com/400/400/'>  <div class='wall-panel'></div><div>Some other text that positions under the container.</div></div>

---

Related Topics