The z-index property fails to function properly when used with a relative parent and after/before pseudo-elements

Here is the code snippet (prototype) that I am working with:

.headerz {
  position: relative;
  padding: 5rem 0 0 5rem;
  margin: 3rem 0 0 0;
  color: #000;
  font-size: 3.8rem;
  text-transform: uppercase;
  z-index: 24;
}

.headerz::before {
  content: "";
  position: absolute;
  width: 110px;
  height: 100px;
  left: 0;
  bottom: -3rem;
  background-color: red;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  z-index: 22;
}

.headerz::after {
  content: "";
  position: absolute;
  width: 72px;
  height: 66px;
  left: 8.5rem;
  top: -2.8rem;
  background-color: blue;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  z-index: 22;
}
<h3 class="headerz">Contacts</h3>

https://codepen.io/anon/pen/LrLjqQ

Can someone explain why the red block in my code isn't positioned under the text correctly?

htmlcssz-indexpseudo-element

Answer №1

To achieve the desired effect, apply z-index: -1 to the before element.

.footer-contacts-header-main {
position: relative;
padding: 5rem 0 0 5rem;
margin: 3rem 0 0 0;
color: #000;
font-size: 3.8rem;
text-transform: uppercase;
z-index: 24;
}

.footer-contacts-header-main::before {
content: "";
position: absolute;
width: 110px;
height: 100px;
left: 0;
bottom: -3rem;
background-color: red;
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
z-index: -1;
}

.footer-contacts-header-main::after {
content: "";
position: absolute;
width: 72px;
height: 66px;
left: 8.5rem;
top: -2.8rem;
background-color: blue;
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
z-index: 22;
}
<h3 class="footer-contacts-header-main">Contacts</h3>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Arranging numerous Text elements within a solitary Drag and Drop container with the z-index property

I am facing a challenge with stacking twelve arguments in no particular order on a drag and drop element. The texts overlap each other, making it difficult for the end user to see them clearly when dragging and dropping. Is there a way to stack texts using ...

javascripthtmlcss

A nifty little JavaScript tool

Recently, I created a bookmarklet that opens a new window with a specified URL and passes variables to a PHP script using the GET method. However, I now require it to load the same PHP script and pass the same variables but within a div element this time. ...

phpjavascriptajaxhtmlbookmarklet

Alter the background-color of the parent div when an input is checked using CSS

.chk-circle { width: 8px; height: 8px; background: #afb0b5; border-radius: 100%; position: relative; float: left; margin-top: 4px; margin-right: 8px; } .chk-circle label { display: block; wi ...

htmlcss

Is there a way to style alternate iframes using CSS?

I need to select every second iframe in the image provided. Is it possible to achieve this using nth-child? I have tried with the following code (unsuccessfully): #main iframe:nth-child(2n+2) ...

csscss-selectors

When resizing an anchor tag with a percentage in CSS, the child image width may not scale accordingly

In short, I have multiple draggable images on a map enclosed in anchor tags (<a><img></a>) to enable keyboard dragging. The original image sizes vary, but they are all too large, so I reduced them to 20% of their original sizes using the ...

javascripthtmlcss

Customize Material UI components by incorporating SASS classes

Currently, I am using Material UI components but I want to streamline my styles by moving them all into a .scss file. Right now, I have a significant styles object within the same JavaScript file where I am utilizing the Material UI components. This styles ...

htmlcssreactjssassmaterial-ui

Initializing an HTML5 video player directly from an Array

I am trying to populate a video player on my webpage with an array of videos. Here is the code I have so far: var current = 0; var videos = ["01", "02", "03", "04"]; function shuffle(array) { var currentIndex = array.length, temporaryValue, randomInde ...

javascriptarrayshtmlvideodynamic

Changing CSS properties in React

Currently, I am working on a dynamic table component using CSS grid. My goal is to customize the grid-template-columns CSS property. I am familiar with using repeat in CSS to achieve this. However, I am facing a challenge when it comes to dynamically chang ...

cssreactjssass

Avoiding overlapping in setTimeOut when using jQuery.hover()

Looking to trigger an effect one second after the page loads, and then every 3 seconds in a loop. When the user hovers over a specific element with the ID #hover, the effect should pause momentarily. It should then resume 2 seconds after the user stops hov ...

javascriptjqueryhtmlcsssettimeout

Steps to store user input into an array and subsequently combine the stored input:

I am currently working on a form that consists of two text boxes: Task and Description. My goal is to be able to log the input from both boxes and save it via a submit button. For example: Task: do laundry Description: do a buttload of laundry (idk lol) I ...

javascripthtmljson

Using PHP to extract specific content from an HTML page within a div element

I've been working on embedding a section of a website into my own site for security reasons. Unfortunately, I can't reveal the specific website I'm trying to embed, so let's use bbc.co.uk as an example. Here is the PHP/HTML code: < ...

phphtmlparsing

Is there a way to have content update automatically?

After writing this block of code, I discovered that clicking on one of the circles activates it and displays the corresponding content. Now, I am looking for a way to automate this process so that every 5 seconds, a new circle gets activated along with its ...

javascriptjavahtmlcssautomation

Can you explain the variance between e-resize and ew-resize cursor styles?

Can you explain the differences between these cursor types? I'm noticing that they all appear as the same cursor in Chrome on Windows. .e-resize {cursor: e-resize;} .ew-resize {cursor: ew-resize;} .w-resize {cursor: w-resize;} <p>Mouse over t ...

htmlcss

Using JQuery to call a PHP file and verify a unique identifier

I've been attempting to use this tutorial to check the availability of certain IDs while a user fills out forms. However, I'm working with PostgreSQL instead of MySQL and seem to be encountering issues with my PHP file. There seems to be a small ...

phpjqueryhtmlajaxpostgresql

Having issues with AngularJS where ng-table/ng-repeat rows are failing to load properly

I've been following a tutorial on using ng-Table, which can be found Here. When I download the example from Git, it loads without any issues. However, when I try to replicate even the simplest example myself, the column headers and filters load but th ...

javascripthtmlangularjsangularjs-ng-repeatngtable

What is the best way to remove top divs without causing the bottom divs to shift upwards?

I am faced with a scenario where I must remove the topmost divs in a document without altering the user's view. Essentially, I need to transition from: ---------start of document div1 div2 div3 ---------start of window div4 div5 ------- ...

javascriptjqueryhtml

Loading jsp content into a div dynamically within the same jsp file upon clicking a link

Currently, I am working on creating a user account page. On this page, my goal is to display related JSP pages in a div on the right side when clicking links like 'search user' or 'prepare notes' on the left side. In my initial attempt ...

javascriptjqueryhtmljspiframe

Activate night mode in ElementPlus using CDN

Is there a way to set the theme to dark in ElementUI + Vue when using CDNs instead of npm? <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0" /> ...

javascripthtmlvue.jselement-uielement-plus

Tips for modifying the "width" of a style within an HTML template implemented in a NodeJs express application

Currently, I am facing a challenge in dynamically adjusting the width value for a <div> element serving as a coloured bar within an HTML template used for PDF generation. While I can successfully set other values using something like {{my_value}}, ap ...

htmlcssnode.jsexpress

"Troubleshooting Issue: jQuery dataTables Filter Functionality Inoperative When Conjoined with

Incorporating the dataTables plugin and recycling code from another page to create a select for filtering a specific column, I encountered issues with the filtering functionality not working as expected. This was perplexing since it was code that had previ ...

jqueryhtmldatatables