Is there a way to position a pseudoelement behind its parent yet still in front of its grandparent using absolute positioning?

Question

Is there a way to position a pseudoelement behind its parent yet still in front of its grandparent using absolute positioning?

Imagine the following scenario:

<div id="one"/>
<div id="two">
   <div id="three"/>
</div>
<div id="four"/>

I am trying to apply a pseudoelement to three that appears behind it but in front of two (and any other ancestors if applicable). The challenge lies in the fact that I am working within a UI framework that automatically generates HTML and CSS, making it impossible to tailor a solution for this specific case alone—it must function universally. Assuming that one, two, and four are absolutely positioned, while three and its pseudoelement may have different position values as long as they act correctly.

Initially, using z-index -1 on the pseudo seemed promising locally, however, it ended up appearing behind two. I attempted to address this by creating a new stacking context on three through setting its z-index to 0, but encountered unexpected behavior. It seems like my understanding of stacking contexts might be flawed.

In case you're curious about the underlying goal, I am striving to incorporate support for rounded gradient borders into the framework.

html css z-index pseudo-element

Answer 1

Answer №1

After reviewing your jsfiddle, it's clear that you can achieve the desired effect by setting a negative z-index value for your pseudo element.

It's important to note that the div#three should maintain the default z-index of auto. Changing it to an integer would establish a new stacking context, making it the base and preventing any child elements from being placed behind it.

The concept of z-index is more complex than many realize. If you'd like to delve deeper into this topic, I recommend reading this informative article.

On a side note, remember that div tags are not self-closing, so always include a proper closing tag.

div {
  width: 100px;
  height: 100px;
  position: absolute;
}

#one {
  top: 0px;
  left: 0px;
  background: red;
}

#two {
  top: 20px;
  left: 20px;
  background: green;
  z-index: 1;
}

#three {
  top: 40px;
  left: 40px;
  background: lightblue;
}

#three::before {
  position: absolute;
  width: 200px;
  height: inherit;
  background: orange;
  content: '3 before';
  top: -20px;
  left: -20px;
  z-index: -1;
}

<div id="one">1</div> 
<div id="two">
  2
  <div id="three">3</div>
</div>

Answer 2

After reviewing your jsfiddle, it's clear that you can achieve the desired effect by setting a negative z-index value for your pseudo element.

It's important to note that the div#three should maintain the default z-index of auto. Changing it to an integer would establish a new stacking context, making it the base and preventing any child elements from being placed behind it.

The concept of z-index is more complex than many realize. If you'd like to delve deeper into this topic, I recommend reading this informative article.

On a side note, remember that div tags are not self-closing, so always include a proper closing tag.

div {
  width: 100px;
  height: 100px;
  position: absolute;
}

#one {
  top: 0px;
  left: 0px;
  background: red;
}

#two {
  top: 20px;
  left: 20px;
  background: green;
  z-index: 1;
}

#three {
  top: 40px;
  left: 40px;
  background: lightblue;
}

#three::before {
  position: absolute;
  width: 200px;
  height: inherit;
  background: orange;
  content: '3 before';
  top: -20px;
  left: -20px;
  z-index: -1;
}

<div id="one">1</div> 
<div id="two">
  2
  <div id="three">3</div>
</div>

Is there a way to position a pseudoelement behind its parent yet still in front of its grandparent using absolute positioning?

Answer №1

Similar questions

What is the best approach to retrieve a JSON object from a form exception that has a specific name?

javascript show and hide navigation bar

Tips on concealing and deactivating the fullscreen option in flowplayer

Creating a perfectly centered square canvas on your screen

Tips for showing just one table data cell (<td>) with identical class:

Conflicting styles between Bootstrap and Formstack are causing radio buttons to appear only partially visible

What is the most effective method to override parent styles while utilizing CSS Modules?

How to show a picture stored in a MySQL database using PHP

What is the best method for uploading photos via ajax in a django application?

Accessing User Input Data with JQuery

Ways to enlarge a YouTube thumbnail upon loading using JavaScript

Align the present domain using XPath

Tips for adjusting the height of a jQuery UI widget control through CSS

What is preventing the question div and buttons from expanding according to their content?

What is the proper way to justify text alignment in HTML?

Insert the picture into an HTML document and retrieve the image file location

Struggled to Find a Solution for Code Alignment

Retrieve information using Angular's EventEmitter

What could be causing my "onChange" function to not work as expected?

What advantages do constant variables offer when selecting DOM elements?