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

Ubuntu: Unable to get IP for network interface / Using multiple network adapters

This is a very focused article on a similar issue which i encountered very recently. Problem: I recently installed Ubuntu Server 20.0 on a virtualBox. My intention was to use 2 network adapters as shown in the picture below. Host-Only Network NAT After setting up, I realised that i could not get IP address for the NAT adapter and it was always DOWN. Solution: Ubuntu20.0 comes with a different Newtork Configuration System compared to older ones like Ubuntu 14. The new Ubuntu uses netplan to handle network configurations. To solve this issue, you need to add specific information about every adapter into the netplan configuration file. The first adapter will always be configured by default. Follow through this article to learn how in 5 easy steps. 1. The picture below shows that my VM is already configured to use 2 network adapters. 2. Now i powered up the VM and check my network parameters. I powered the VM and ran the commands to check if my 2 network adapters we...
Post a Comment
Read more

Laravel: Implementing the country based phone input

When you ideate on your next Laravel project, don't forget that feeling, where you are lost in cloud thinking most of the work has been built into the framework. One such task not built into the framework is the country selector and any other data-driven task/feature. The image below is the desired end result.   Components Below are the different components and how to create them. 1. Countries Table and Model : running the command below on a command-line tool from within a Laravel project should help achieve this. php artisan make:model Models\Country -m our Table can be created with the SQL below; CREATE TABLE `countries` ( `id` BIGINT(20) UNSIGNED NOT NULL AUTO_INCREMENT, `name` VARCHAR(255) NOT NULL, `iso2` VARCHAR(255) NOT NULL, `created_at` TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (`id`) ) COLLATE='utf8mb4_unicode_ci' ENGINE=InnoDB; 2. Regions table and Model:  A country might have many regions, each region is not expected to have more than...
Post a Comment
Read more