How to get a child element to show behind (lower z-index) than its parent?

I need a certain dynamic element to always appear on top of another element, no matter what order in the DOM tree they are. Is this possible? I've tried z-index (with position: relative), and it doesn't seem to work.

I need:

<div class="a">
    <div class="b"></div>
<开发者_JS百科;/div>

<div class="b">
    <div class="a"></div>
</div>

To display exactly the same when rendered. And for flexibility purposes (I'm planning on distributing a plugin that needs this functionality), I'd really like to not have to resort to absolute or fixed positioning.

For what it's worth, to perform the function I was wanting, I made a conditional statement where the overlapping child element would become transparent in the case it was blocking the view of its parent. It's not perfect, but it's something.

You can do this in modern browsers now using transform 3D with CSS. It wasn't really possible in 2010 but it is now.

.parent {
  background: red;
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  position: relative;
}

.child {
  background: blue;
  width: 100px;
  height: 100px;
  position: absolute;
  top: -5px;
  left: -5px;
  transform: translateZ(-10px)
}

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

If the elements make a hierarchy, it cannot be done that way, because every positioned element creates new stacking context, and z-index is relative to the elements of the same stacking context.

I figured out a way to actually put the child element behind its element by creating a pseudo-element which mimics the parent. Useful for stuff like dropdown-menus - hope it helps, user from eight years ago!

div {
	 position: relative;
}
 .container > div {
	 float: left;
	 background-color: red;
	 width: 150px;
	 height: 50px;
	 z-index: 10;
}
 .container > div:before {
	 content: '';
	 display: block;
	 position: absolute;
	 height: 100%;
	 width: 100%;
	 background-color: red;
	 z-index: 7;
	 top: 10px;
}
 .a > .b, .b > .a {
	 z-index: 5;
	 position: absolute;
	 width: 100%;
	 height: 100%;
	 background-color: teal;
}
 .a + .b {
	 margin-left: 20px;
}
 

<div class="container">
  <div class="a">
    <div class="b"></div>
  </div>

  <div class="b">
    <div class="a"></div>
  </div>
</div>

The answer for the question

How to get a child element to show behind (lower z-index) than its parent?

is to:

• Make the parent not a stacking context
• Make the child a positioned stacking context, whose z-index smaller than 0.

Notice: I said make the child a positioned stacking context, not just stacking context, because pay attention that z-index will only be valid for positioned element)

About how an element is considered a stacking context, read this, and how an element is considered a positioned element, read this. Or a great explanation from this answer.

Conclusion:

• Make sure the parent is not a stacking context
• Make sure the child is a stacking context
• Make sure the child's z-index is smaller than 0
• Make sure the child is a positioned element so that the z-index from last step is applicable

Yet you have to understand 2 terms stacking context and positioned element

I've had success using the following.

z-index: -1;

.dynamic-element-top{
  position:absolute;
  z-index:0;
}

.another-element-bottom{
  position:relative;
  z-index:-1;
}

what you need is position: absolute in order for z-index to work.

also you will need to set the left and top css properties to position the element in the correct place. You will probably need to do this with javascript.