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

Resolving Incompatible Builds of PHP and Apache in Laragon: Add multiple versions of Apache

 As developers, it's often the case that different versions of PHP and server tools are installed quickly without taking into account the architecture for which they were built. In this article, we will focus on solving a specific error that arises when running incompatible builds of PHP and Apache. Recently, I encountered an issue when downgrading my Laragon setup from PHP 8.1 (x64) to PHP 7.x (x86). This caused compatibility problems with Apache, and I received an error message indicating that my PHP and Apache builds were not compatible, as the Apache installed was built for x64 versions of PHP. In this article, I'll provide a step-by-step guide on how to install multiple versions of Apache on Laragon. By following these steps, you can resolve any similar issues that you may encounter. Step 1: Download the Latest Version of Apache Visit https://www.apachelounge.com/download/additional/ to download the latest version of Apache. The homepage provides quick access to 64-bit ve...
Post a Comment
Read more

Laragon: installing more versions of Apache/HTTPD

Most of the time, we casually install various PHP versions and server tools without checking if they were built for Win32 or Win64. A discussion for another day. I recently downgraded Laragon’s from PHP8.1-x64 to PHP7.x-x86. This had a little consequence - APACHE! Hence, I got the error below, indicating that my PHP and Apache can’t work together because they are of different architectures or builds.   The originally installed Apache was for 64-bit PHP versions, there are no Apache versions designed to run both 32-bit and 64-bit builds of PHP. In this article, I share steps and links that guide you to install multiple versions and builds of Apache on Laragon. 1. For all intent and purposes, you are advised to always download the latest version of Apache. Visit this URL https://www.apachelounge.com/download/additional/ to see the different versions available. It is easy to access the 64-bit versions from the homepage. However, to access the 32-bit versions, you need to use this UR...
Post a Comment
Read more

How to configure multiple host for Apache on Ubuntu

Introduction I recently switched to Ubuntu Desktop. Everything was simple and straight forward until i needed to run multiple Laravel projects on my LAMP stack. For the records, I will also demonstrate how i installed a stable LAMP setup. If you are only interested in configuring multiple Host on Apache, you can click here to skip the story. Installing the LAMP Stack LAMP simply means Linux,Apache,MySql,PHP. I tried so many methods but the command below made life easier for the living . sudo apt-get install lamp-server^ The command above installed all i needed without any issue. I already configured Mysql from previous installation. All data and configurations of MySql from previous installation remained intact. I installed the laravel installer and initialized a new Laravel project in the Apache directory. cd /var/www/html At first i was comfortable with using  php artisan ser Later i decided i was not convenient with the 127...:8080, in windows i had laragon to create vanit...
Post a Comment
Read more