Skip to main content

Is this a CSS Bug: setting Background and z-index for Pseudo selectors(::before & :: after)

Recently I was making some UI for a friend's project. We had this CSS button effect that works elsewhere but failed to work at the desired location. Upon troubleshooting, we discovered that if the parent element has a background defined, you can't control the z-index of the pseudo selection of any of its children. Wait for it, I have got some demo.




TL;DR

set background colour or image for a "DIV.parent", create a "Div.child" inside the "DIV.parent". use CSS to modify the "::before"" element of the "Div.child" as follows; set position as absolute, content as an empty string, height:100% and width is best at 50% for example purposes, lastly, give it a background colour.
You will observe that the "::before"" element is overlaying the actual element's content. Try to adjust the z-index of the "::before"". You will also realize that the z-index works fine if we remove the background setting for "DIV.parent".



Let's run through some code.

we begin with our markup then we move to CSS styles.

Our goal is to have a DIV where the background colour is defined on the pseudo-element(::before). For this to happen, we must make the DIV's position relative, then we set an absolute position for the pseudo-element. The pseudo-element also needs to be 100% height and any width greater than zero is fine. The absolute position here will force our pseudo-element to overlay the text. This is why we need to set a "z-index". The issue now is that the z-index is not giving desired effects. This was traced to the fact that the "parent" container had a background property defined.

<body>

    <div class="parent">
        <h1 style="color: white;">One BG disturbs another</h1>
        
        <div class="child">
            Where is my ::before's BG
        </div>

        <div class="child reset-z-index">
            I'm here without Z-index
        </div>
    </div>

    <div class="child">
        BG is out the BOX
    </div>
    
</body>

Now to the CSS styles

        .parent{
            background: #8ba274;
        }

        .child{
            padding: 15px;
            display: inline-block;
            border: solid 1px rebeccapurple;
            position: relative;
            margin-top: 15px;
            margin-bottom: 15px;
            color: #19634a;
            font-weight: bolder;
        }

        .child::before{
            position: absolute;
            top: 0;
            left: 0;
            content: '';
            width: 100px;
            height: 100%;
            background-color: #f11;
            z-index: -1;
        }

        .reset-z-index::before{
            z-index: auto;
        }

Here in the style, we set the z-index as auto, to ensure that we can see what happens when the z-index is not set.


I am not sure what can be called a bug. I have only tried this on chrome browser (Version 92.0.4515.107 (Official Build) (64-bit)) so feel free to engage and let's see what happens at your own end when you test on all browsers. Perhaps you could find a better reason why this has to be so.

Cheers.

The resolution: if you have to use the pseudo-element for a similar function, ensure the parent container has no background property defined. Or better still, set your background property on the body tag.

Plot Twist: If you add background colour to the ".child" style, it becomes more messy and unusable.

This however has been solved and I am making a new article on how we got it solved.


Comments

Post a Comment

Popular Articles

[SOLVED] Linux - Issues installing Docker on Ubuntu - libseccomp2 version 2.3.1 installed but 2.4 required

This article has been improved for a better understanding - goto  https://splashcoder.blogspot.com/2023/07/installing-docker-on-ubuntu-1804-solved.html There is a possibility that you are trying to install docker. There is a very comprehensive guide at https://docs.docker.com/engine/install/ubuntu/#install-using-the-repository. The linked guide serves as a reference for this article. We try to address the common errors in this article. Just so you won’t have to scour the entire answers on StackOverflow. Step 1: The first thing is to run our famous "apt update" command. So run the command below. sudo apt-get update You may observe that there are some errors. And YES! we are using a fairly old Ubuntu 18.04 Bionic Beaver Release. It seems perfect for this as most people have issues installing docker anyways. To resolve this, you may refer to  Configure DNS server IP to resolve errors with apt-get update Step 2: Following the Docker article, we should run the commands below. sudo...
Post a Comment
Read more

Installing Docker on Ubuntu 18.04 ([SOLVED]- libseccomp2 version 2.3.1 installed but 2.4 required)

 Introduction: If you're attempting to install Docker on Ubuntu 18.04 Bionic Beaver, which is known for having installation issues, this comprehensive guide aims to address common errors you may encounter during the process. Our goal is to save you time searching for answers on StackOverflow by providing clear instructions. The guide is based on the official Docker documentation available at https://docs.docker.com/engine/install/ubuntu/#install-using-the-repository. Step 1: Updating Package Lists To begin, run the following command to update your package lists using the "apt-get update" command: sudo apt-get update Note: If you encounter any errors during the update process, it may be due to the older Ubuntu 18.04 release. In such cases, you can refer to the Configure DNS server IP to resolve errors with apt-get update  guide for assistance. This guide will help you address any DNS-related issues that might be preventing successful updates. Step 2: Installing Dependencie...
Post a Comment
Read more

Linux - Configure DNS server IP to resolve errors with apt-get update

Perhaps you have a new install of Ubuntu, and you are about to install docker or any other Linux packages. The first step is to update the application repositories using the sudo apt update command. There is a very small possibility that you will get the error below if you are using a fresh install of the Ubuntu 18.04 LTS (Bionic Beaver). This error simply means that Linux is unable to connect to the official repository likely due to a DNS configuration or a network issue. Here we try to help you resolve the DNS issue. To resolve this, you must specify a DNS in your network settings. Well, there is one popular DNS that works well: Google's DNS. Follow through, please. STEP 1: Go to the settings page of Linux (Ubuntu) STEP 2: This should reveal a plethora of options. On the left pane, simply scroll down and click Network as shown below. This reveals your different network connections, for me, “enp0s3” is the adapter connecter to the internet. So, I must configure DNS for “enp0s3”. ...
Post a Comment
Read more