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

Utilizing carouFredsel for thumbnails and compatibility with IE7

Enhance your website's user experience by implementing Bootstrap breadcrumb styling integrated

The overflowing pop-up container

Is there a way to eliminate the transform style from a draggable element?

Adjust the size of the text within the div element as needed

Expanding the width of the textfield is not possible in CSS styling

What is the correct way to properly wrap the div component in this code snippet?

Leveraging jQuery to manipulate an SVG file

A Step-by-Step Guide on Importing Components in Vue.js

Is it possible to use a shell script to replace the external CSS file link in an HTML file with the actual content of the CSS file

What is the reason why the show() function in JQuery only applies to one specific element, rather than all elements selected with the same selector?

Enhancing bar border with the addition of a separator

Tips for effective page management

Why has my dropdown menu decided to go horizontal, rather than dropping down as it should?

What is the reason for the improper setting of the div position?

creating a new page upon clicking a div element

Arranging inline-flex elements within a div container

Issue with setting a background image to a div in Next.js: not functioning as expected

Looking for help with aligning an icon to the right side of my text

Is it possible to refresh a table that is currently displayed in a model popup?