The z-index property in CSS is not functioning as expected when used with an absolute div inside a

https://i.sstatic.net/MnNQY.png

Why isn't z-index working for me? I have a process div (container) Inside the process div, there are links in a row. These links are further divided into progress_number divs (large number) and progress_text divs (short description below large number). I have also added bars between each progress_number div.

Check out the HTML code below

<div class="process">
    <a href="">
        <div class="process_number">1</div>
        <div class="process_text">text1</div>
    </a>
    <a href="">
        <div class="process_number">2</div>
        <div class="process_text">text2</div>
    </a>
    <a href="" class="process_selected">
        <div class="process_number">3</div>
        <div class="process_text">text3</div>
    </a>
    <a href="">
        <div class="process_number">4</div>
        <div class="process_text">text4</div>
    </a>
    <a href="">
        <div class="process_number">5</div>
        <div class="process_text">text5</div>
    </a>
</div>

Here's the CSS code

.process{
    width:100%;
    height:160px;
    border-bottom:1px solid #c4cdd2;
    margin-top:35px;
    z-index:;
}
.process a{
    text-align:center;
    text-decoration:none;
    display:inline-block;
    margin-left:186.5px;
    position: relative;
}
.process a:first-child{
    margin-left:50px;
}   
.process .process_number{
    height:75px;
    width:75px;
    font-size:47px;
    font-weight:bold;
    border: 1px solid #47a5d8;
    border-radius:100%;
    color: #47a5d8;
    background-color:#fff;
    text-align:center;
    line-height:170%;
    z-index:;
}   
.process .process_text{
    font-size:15px;
    font-weight:bold;
    color: #c4cdd2;
    margin-top:10px;
}
.process .process_number::before{
    content:'';
    position:absolute;
    top:33px;
    right:55px;
    width:250px;
    height:10px;
    background-color:#47a5d8;
    z-index:1;
}
.process a:first-child .process_number::before{
    display:none;
}
.process_selected .process_number{
    color:#fff;
    background-color:#47a5d8;
}
.process_selected ~ a .process_number{
    color:#c4cdd2;
    background-color:#fff;
    border-color:#c4cdd2;
}
.process_selected ~ a .process_number::before{
    background-color:#c4cdd2;
} 
.process_selected .process_text{
    color:#47a5d8;
}

Currently, I'm struggling to hide the bar (.process_number::before) behind the large round bounded number (.process_number). Despite trying to modify the z-index, all my attempts have failed. Any advice would be greatly appreciated.

htmlcssz-index

Answer №1

Applying the CSS rule z-index: -1 to .process .process_number::before worked perfectly for me.

.process{
    width:100%;
    height:160px;
    border-bottom:1px solid #c4cdd2;
    margin-top:35px;
    z-index:;
}
.process a{
    text-align:center;
    text-decoration:none;
    display:inline-block;
    margin-left:186.5px;
    position: relative;
}
.process a:first-child{
    margin-left:50px;
}   
.process .process_number{
    height:75px;
    width:75px;
    font-size:47px;
    font-weight:bold;
    border: 1px solid #47a5d8;
    border-radius:100%;
    color: #47a5d8;
    background-color:#fff;
    text-align:center;
    line-height:170%;
    z-index:;
}   
.process .process_text{
    font-size:15px;
    font-weight:bold;
    color: #c4cdd2;
    margin-top:10px;
}
.process .process_number::before{
    content:'';
    position:absolute;
    top:33px;
    right:55px;
    width:250px;
    height:10px;
    background-color:#47a5d8;
    z-index:-1;
}
.process a:first-child .process_number::before{
    display:none;
}
.process_selected .process_number{
    color:#fff;
    background-color:#47a5d8;
}
.process_selected ~ a .process_number{
    color:#c4cdd2;
    background-color:#fff;
    border-color:#c4cdd2;
}
.process_selected ~ a .process_number::before{
    background-color:#c4cdd2;
} 
.process_selected .process_text{
    color:#47a5d8;
}
<div class="process">
    <a href="">
        <div class="process_number">1</div>
        <div class="process_text">text1</div>
    </a>
    <a href="">
        <div class="process_number">2</div>
        <div class="process_text">text2</div>
    </a>
    <a href="" class="process_selected">
        <div class="process_number">3</div>
        <div class="process_text">text3</div>
    </a>
    <a href="">
        <div class="process_number">4</div>
        <div class="process_text">text4</div>
    </a>
    <a href="">
        <div class="process_number">5</div>
        <div class="process_text">text5</div>
    </a>
</div>

Answer №2

Instead of giving a z-index of 1 to your .process .process_number::before element, consider using z-index:-1 as shown in the updated code below. 

.process{
    width:100%;
    height:160px;
    border-bottom:1px solid #c4cdd2;
    margin-top:35px;
}

.process a{
    text-align:center;
    text-decoration:none;
    position: relative;
    margin-left:100px;
    display:inline-block;
}
.process a:first-child{
    margin-left:0px;
}   
.process .process_number{
    height:75px;
    width:75px;
    font-size:47px;
    font-weight:bold;
    border: 1px solid #47a5d8;
    border-radius:100%;
    color: #47a5d8;
    background-color:#fff;
    text-align:center;
    line-height:170%;
    z-index:9;
}   
.process .process_text{
    font-size:15px;
    font-weight:bold;
    color: #c4cdd2;
    margin-top:10px;
}
.process .process_number::before{
    content:'';
    position:absolute;
    top:33px;
    right:55px;
    width:200px;
    height:10px;
    background-color:#47a5d8;
    z-index:-1;
}
.process a:first-child .process_number::before{
    display:none;
}
.process_selected .process_number{
    color:#fff;
    background-color:#47a5d8;
}
.process_selected ~ a .process_number{
    color:#c4cdd2;
    background-color:#fff;
    border-color:#c4cdd2;
}
.process_selected ~ a .process_number::before{
    background-color:#c4cdd2;
} 
.process_selected .process_text{
    color:#47a5d8;
}
<div class="process">
    <a href="">
        <div class="process_number">1</div>
        <div class="process_text">text1</div>
    </a>
    <a href="">
        <div class="process_number">2</div>
        <div class="process_text">text2</div>
    </a>
    <a href="" class="process_selected">
        <div class="process_number">3</div>
        <div class="process_text">text3</div>
    </a>
    <a href="">
        <div class="process_number">4</div>
        <div class="process_text">text4</div>
    </a>
    <a href="">
        <div class="process_number">5</div>
        <div class="process_text">text5</div>
    </a>
</div>

Answer №3

It is crucial to include position: relative (or absolute) in the style definition of any class that utilizes a z-index property.

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

Animating transitions on a dynamic Bootstrap navbar using jQuery

I have the code attached here, and I successfully changed the color of the navbar and logo when scrolling down. However, I am looking to add a transition effect when this change occurs. I experimented with various transition options in CSS, but unfortunat ...

javascripthtmljquerycssbootstrap-4

What criteria does a PHP function need to meet in order to be considered valid for use with AJAX and PHP?

My website includes an input field that undergoes real-time checking via AJAX requests to inform users if their input is valid or not. Upon submission, the input must be rechecked to ensure it meets the same criteria as checked by AJAX (in case JavaScript ...

javascriptphpjqueryhtmlajax

Tips for preserving scroll location on Angular components (not the window) when navigating

My current layout setup is like this: https://i.sstatic.net/hOTbe.png In essence <navbar/> <router-outlet/> The issue I'm facing is that the router-outlet has overflow: scroll, making it scrollable (just the outlet section, not the ent ...

javascripthtmlcssnode.jsangular

Issue with Tailwind CSS table header alignment not properly aligning to the right

Currently, I am facing an issue with tailwindcss where the headers in my table are not following the text-right / text-left / text-center directives. If you want to see the problem yourself, here's a link to the fiddle: https://jsfiddle.net/3u2jgqoc/ ...

htmlcsstailwind-csstext-alignment

iPhone has trouble accessing alternative forms of content

<object width="300" height="100" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"> <param value="5352f5c8e96c251fb9d79890f2294608.swf" name="movie"> <!--[if !IE]>--> <object width="300" height="100" data="5352f5c8e96 ...

iphonehtmlflashios

Is there a way to alter the color of the weekday header in the Date picker calendar?

I'm working on enhancing the accessibility of my website by changing the default blue color of the weekdays header (highlighted area in the screenshot). I've attempted to modify the CSS code below, but no matter which color code I use, I can&apos ...

htmlcssangulardatepicker

Can a line be created using only CSS without the need for an additional HTML element?

There have been many inquiries regarding drawing lines without adding an additional HTML element. Consider this scenario with an HTML div element: <div class="myDiv"></div> Accompanied by the following CSS: .myDiv{ width: 100px; height: ...

htmlcss

Modify the CSS class by adding attributes dynamically instead of directly to the element

I encountered a situation where I needed to apply a css property to a class rather than an element. For example: $('.class_with_css').css({display:'none'}); This code would add the style "display:none" to all elements with the cl ...

javascripthtmljquerycsscss-selectors

Why are the buttons on my HTML/JavaScript page not functioning properly?

I have been struggling with a code for a 5 image slideshow where the NEXT and PREVIOUS buttons are supposed to take me to the next and previous slides. However, when I press them, nothing happens. Can anyone provide some assistance? I need additional detai ...

javascripthtml

Strategies for efficiently creating reusable HTML templates for recurring content blocks?

I am just starting out in web development and have encountered a problem with navigating through my page. The layout of the pages is the same, except for a div container. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

htmlajax

Update a div in PHP using the data received from an AJAX response

I recently developed a PHP application and encountered an issue with updating the value of a date picker. The user is prompted for confirmation when changing the date, and upon confirmation, the date in the "expiry" field (with id expiry) should update alo ...

javascriptphpjqueryhtmlajax

Manipulating background scrolling using jQuery

I had a vision of creating a logo with PNG transparency and a scrolling background that would give the appearance of being made in Flash. To achieve this effect, I utilized the jquery.backgroundPosition.js plugin for enabling background scrolling. Here is ...

jqueryhtmlcss

Looking for assistance with CSS positioning techniques

Creating a dropdown list with a caret icon for each item is my goal, but I'm facing some challenges. Here's the code snippet of the div structure: <div class="class-to-div1" id="{{ div.id }}" data-cardsnum="{{ div.num }}"> <div clas ...

htmlcss

I'm having trouble with Gutters GX and GY not functioning properly in Bootstrap, HTML, and CSS

I attempted to incorporate gutters into my Bootstrap grid layout, however, they are not showing up as expected. I am following the guidelines provided on the Bootstrap documentation, but for some reason, the gutters are not appearing. <!DOCTYPE html> ...

htmlcssbootstrap-5

What are the steps for populating a table cell with data using AJAX, MySQL, and PHP in the given situation?

The challenge is to create an HTML table with two columns where the first column gets its data from PHP and MySQL. The goal is to turn the values in the first column into clickable links that, when clicked, trigger an AJAX call to fetch information from th ...

phphtmlmysqlajaxhref

Show a popover within a parent div that has limited visible space due to its hidden overflow

Struggling with AngularJS, I can't seem to find a simple solution for this problem. In my code, there's a div element with the overflow: hidden property set due to an internal scrollbar. Inside this div, there's a dropdown menu that is trigg ...

javascripthtmlcssangularjs

Which file extension is superior for SEO: .html, .php, or .aspx?

Which file extension is more SEO-friendly: .html, .php, or .aspx? Or is an extension-less URL the best option for SEO? ...

htmlxhtmlseofriendly-url

Using ChartsJs to visualize input data formatted in the German data format

I am relatively new to working with Charts.js, but I will need it to generate some visually appealing graphs for my website. In the background, I have a Django project running that calculates a specific set of numbers for me. Due to the language setting in ...

javascriptpythonhtmldjangochart.js

What is the most efficient way to transform HTML into React components effortlessly?

I have been attempting to automate the process of converting HTML into React components. I followed the link below to automatically convert HTML into React components: https://www.npmjs.com/package/html-to-react-components However, I encountered an issue ...

javascripthtmlreactjsnpm

Prevent side-to-side scrolling on elements that exceed the width of the screen

I am working on building a navigation system similar to Google Play, where there are fixed tabs for browsing through the app. I have created a container div that holds various content sections. <div id="container"> <div class="section"> .. ...

javascripthtmlcssmobile