Struggles with z-index in pseudo elements

I'm facing an issue with positioning my pseudo element behind its parent element. I want the red box to appear in front of the blue box.

#mobile-nav-icon {
  position: absolute;
  display: block;
  height: 92px;
  width: 93px;
  background-color: red;
  right: 16px;
  top: 46px;
  z-index: 2;
}

#mobile-nav-icon:before {
  content: '';
  top: -9px;
  left: -10px;
  background-color: blue;
  height: 93px;
  width: 97px;
  position: absolute;
  z-index: -1;
}
<div id="mobile-nav-icon">
  <p>menu</p>
</div>

The output is not as expected, the text appears in front of the pseudo element while the parent's background remains hidden.

Any suggestions or solutions?

Check out the code on jsfiddle

htmlcss

Answer №1

Remove the z-index from the initial rule:

#mobile-nav-icon {
  position: absolute;
  display: block;
  height: 92px;
  width: 93px;
  background-color: red;
  right: 16px;
  top: 46px;
}

#mobile-nav-icon:before {
  content: '';
  top: -9px;
  left: -10px;
  background-color: blue;
  height: 93px;
  width: 97px;
  position: absolute;
  z-index: -1; /* Remove this line */
}
<div id="mobile-nav-icon">
  <p>menu</p>
</div>

Answer №2

Consider using both :before and :after selectors simultaneously.

#mobile-nav-icon {
  position: absolute;
}
#mobile-nav-icon:after {
  position: absolute;
  content: '';
  display: block;
  height: 92px;
  width: 93px;
  background-color: red;
  right: 16px;
  top: 46px;
  z-index: 2;
}

#mobile-nav-icon:before {
  content: '';
  position: absolute;
  z-index: 1;
  top: -9px;
  left: -10px;
  background-color: blue;
  height: 93px;
  width: 97px;
}
<div id="mobile-nav-icon">
  <p>menu</p>
</div>

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

Incompatibility Issue with Ajax Request on iPad 1 (iOS 5.1.1)

Having an issue with reloading content on my iPad web app. The get request works fine in the browser, but I'm experiencing trouble in Safari on the iPad 1 (iOS 5.1.1). Any suggestions on how to fix this? <script type="text/javascript"> ...

jqueryhtmliosajaxipad

Is there a way to lower just one border?

I need assistance with moving the .container div downward on my webpage. I attempted using (margin-top: 30px) and it worked, but unfortunately, it also shifted down the border of the (.container) along with the outline of .all. My goal is to have only the ...

htmlcss

What is the best way to align two span tags to the right on separate lines?

I am facing an issue with the positioning of three span tags: A is floated left while B and C are floated right. My desired layout is to have C positioned below B, both floating right on separate lines. I attempted using display:block for B but it did not ...

csscss-floatblockhtml

Modifying the color of specific sections of SVG elements

Interested in utilizing the d3.js timeknots component, a svg visualization that includes line and circle elements. My goal is to implement a stopwatch animation that dynamically changes the color of the svg visualization over time. I am contemplating crea ...

javascripthtmlcssd3.jssvg

Disable browser suggestions in Material UI's Autocomplete component

Encountering an issue with Material-ui Autocomplete: import Autocomplete from "@material-ui/lab/Autocomplete"; Currently using it in: <Autocomplete id="checkboxes-tags-demo" autoComplete={false} options={sta ...

javascripthtmlreactjsautocompletematerial-ui

Creating adaptable breakpoints for content using Bootstrap or pure CSS

I'm trying to create a responsive layout using the Bootstrap "row" and "col" classes, but I'm having trouble figuring out how to structure the content. Here's what I mean: https://i.sstatic.net/WkMmE.png This is my current HTML structure: ...

htmlcssbootstrap-4responsive-designfrontend

The JavaScript calculator fails to display the value of buttons on the screen when they are pressed

I was attempting to create a calculator using JavaScript, but when I click on any button, nothing happens (the buttons don't display their values on the calculator's screen). My text editor (vs code) didn't indicate any errors, but upon insp ...

javascripthtmlcalculator

Steps for creating a table with a filter similar to the one shown in the image below

https://i.sstatic.net/zR2UU.png I am unsure how to create two sub-blocks within the Business A Chaud column and Potential Business Column. Thank you! I managed to create a table with input, but I'm struggling to replicate the PUSH & CtoC Column for ...

javascripthtmlangulartypescriptangular-material

Right and left floating elements align side by side

The alignment of the images and file labels needs adjustment to ensure they all appear on the same line. Below is the code snippet that I have tried: HTML: <div> <img src="{{asset('bundles/cramifaccueil/images/pdfdocument.png')} ...

csstwig

How can you animate the background of a website using AngularJS - CSS or JavaScript?

My aim is to create a dynamic animation for the background image when the view changes. The current background image is set through a function defined within MainController: // app/js/controllers.js $scope.getBg = function() { return $route.current.sco ...

javascriptcssangularjsanimationgsap

Ways to configure dynamic and responsive divs using CSS exclusively (no javascript needed)!

I am looking to have my main div expand in height based on the categories div, content, or product pictures. Check out the website here Here are the issues I'm facing: The content div and categories div are both within the main div, but the produ ...

htmlcss

What is the best way to modify the color of the active tab I have chosen?

I've designed a tab menu using Divs and CSS, but I'm facing an issue with changing the color of the selected tab. I tried adjusting the background color of the .tab class, but it seems to only work for part of the tab... You can view the problem ...

htmlcss

Arranging Divs Inside a Container Div - Dealing with Overflow

I am in the process of developing a website that includes a unique structure that I have not encountered before. This layout involves joining multiple sections within a wrapper. As this is my first time attempting such a layout, I am encountering some chal ...

csshtml

Switch between list items using a button to change the ID in Javascript

I am trying to implement a floating navbar that appears after a button click and floats down from the top. The idea is that when the button is clicked, the navbar animates downward and then changes the button's id so that the next click triggers a dif ...

javascripthtmljquerybutton

The PHP random number generator appears to be malfunctioning when being compared to the $_POST[] variable

In this section, random numbers are generated and converted to strings. These string values are then used in the HTML. $num1 = mt_rand(1, 9); $num2 = mt_rand(1, 9); $sum = $num1 + $num2; $str1 = (string) $num1; $str2 = (string) $num2; The following code ...

javascriptphphtml

Link that updates periodically linked to an image

My goal is to have a URL change on a timer that is linked to an image. For example, after 10 seconds, I want the URL attached to the image to change without changing the actual image itself. I've been trying to figure out how to modify this code, but ...

javascripthtmlcss

Display each div one at a time

I am working on a script that should reveal my divs step by step. However, the current code only shows all the divs at once when clicked. How can I modify it to detect each individual div and unveil them one by one? For example, on the 1st click => expa ...

javascriptjqueryhtmlcss

Tips for placing images within columns with varying sizes

Looking to create a responsive layout with Bootstrap 4 that showcases images in a container. Struggling to achieve the desired result, particularly when it comes to placing images. Any tips on how to accomplish this? Thanks in advance!https://i.sstatic.n ...

htmlcssbootstrap-4

Retrieve information from internet sources

I'm attempting to extract the initial paragraph from Wikipedia by utilizing only JavaScript. Essentially, my goal is to: document.getElementsByTagName("P")[0] However, this content is not present on my own website; instead, I aim to retrieve a speci ...

javascripthtmlwikipedia-api

Creating multiple Google markers based on addresses retrieved from a database using PHP

I have a requirement to display multiple Google markers on a map based on addresses stored in a database. I have already successfully loaded an XML file to retrieve latitude and longitude coordinates, but now I need assistance on how to create multiple m ...

phpjqueryhtmljsongoogle-maps