Setting the z-index of the parent element causes issues with overlapping

When adjusting the z-index property of the parent element, I am experiencing issues with overlapping elements. Below is the HTML and CSS code:

.black_gradient{
  width:100%;
  height:100%;
  background: linear-gradient(0deg,rgb(75, 75, 75) 20%, rgba(75,75,75,0.8) 70%, rgba(75,75,75,0.3));
  position:relative;
  display:block;
  z-index:3;
}
.img_container{
  width: 100%;
  height: 100%;
  margin: 0 auto;
  position: relative;
  z-index:-2;
  display:inline-block; 
}
<div class="black_gradient">
   <div class="img_container">
      <img src="http://i48.tinypic.com/wrltuc.jpg" />
   </div>
</div>

For more details, you can visit this JSFiddler link. It seems that removing the z-index from black_gradient resolves the issue, however, I have been researching about overlapping and z-index from sources like the Mozilla Developer Page without finding a solution as to why setting the z-index causes it not to work as expected.

htmlcssz-indexoverlapping

Answer №1

Now presenting the current appearance JS Fiddle

html, body{
  margin:0;
  padding:0;
  height:100%;
}
.img_container {
  width: 100%;
  height: 500px;
  margin: 0 auto;
  position: relative;
  display: inline-block;
}
.to_top.black_gradient {
  width: 100%;
  height: 100%;
  display:inline-block;
  background: linear-gradient(0deg, rgb(75, 75, 75) 20%, rgba(75, 75, 75, 0.8) 70%, rgba(75, 75, 75, 0.3));
  position: absolute;
  top:0;
  left:0;
}
<div class="img_container">
  <img style="" class="tall" src="http://i48.tinypic.com/wrltuc.jpg" />
  <div class="to_top black_gradient">
  </div>
</div>

The issue arises from the stacking concept of z-index, where child elements have their own stacking context separate from their parents. This is explained on the MDN - The stacking context page:

Each stacking context is completely independent from its siblings: only descendant elements are considered when stacking is processed.

Furthermore, in the Notes section:

  • Root
    • DIV #2 - z-index is 2
    • DIV #3 - z-index is 4
      • DIV #5 - z-index is 1, positioned under an element with a z-index of 4, resulting in a rendering order of 4.1
      • DIV #6 - z-index is 3, positioned under an element with a z-index of 4, resulting in a rendering order of 4.3
      • DIV #4 - z-index is 6, positioned under an element with a z-index of 4, resulting in a rendering order of 4.6
    • DIV #1 - z-index is 5

The previous issue occurred because children always inherit higher z-index values from their parents due to being considered as another stacking context, similar to DIV#5 and DIV#6 compared to their parent DIV#3 in the above example.

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

Whenever I attempt to display certain HTML files in Django, I encounter an error message stating: "NoReverseMatch at / Reverse for 'it_languages' not found."

Every time I attempt to display a HTML file in my Django project, an error pops up preventing me from accessing the localhost page. The exact error message I receive is: The error is: NoReverseMatch at / Reverse for 'it_languages' not found. &apo ...

pythonhtmldjango

Consistently directing to a single page on the Node Js web server

I'm in the process of creating a website with multiple HTML pages. Currently, I have code that successfully links to the login page, but unfortunately, the localstores page also directs to the login page. const express = require('express') ...

javascripthtmlnode.jsexpress

Leveraging jQuery within a dynamically loaded div

I am attempting to implement some jQuery on a page that is loaded into a div using the .load() function. The PHP code loaded into the div contains a hidden section that slides out when a link is clicked. However, I am facing an issue where the div slides b ...

jqueryhtmlloadhide

Getting form field values with JQuery

I am currently facing an issue with a form field in HTML. Here is the code snippet: <form id="tasklist"> <input type="text" id="name" ...></input> ... additional form elements go here ... </form> Although I am trying to retrie ...

javascriptjqueryhtml

Steps for developing a web-based interface for my software

I could use some guidance on how and where to get started. Currently, I have a program written in vb.net that performs basic functions by executing bat files, accessing specific folders, and carrying out command line tasks. My plan is to convert this progr ...

javaphphtmlvb.net

Is it possible to create a d3 gauge chart showcasing data with both labels and

We've been on the hunt for a radial chart that resembles the one shown below. What makes this chart stand out is the clear display of percentage values. Despite our search efforts over three days, we have yet to come across anything using the d3.js li ...

javascriptjqueryhtmld3.jscharts

How to Find a Specific File by Partial Name in HTML

Currently building a webpage, I need to provide a link to a log file located on the server. The catch is that the filename includes a random number at the end, but I do know the starting part of it. Here's the snippet of my code: <a href="../New_f ...

html

Enhancing Layouts with Bootstrap 5: Implementing Space Between Rows

Can anyone help me figure out how to add a vertical gutter between two rows with Bootstrap 5? I've tried using g-* and gy-*, but as shown in this jsfiddle, it doesn't seem to be working. Any ideas on what might be causing this issue? From my und ...

htmlbootstrap-5gutter

Customize Appearance: Overlay Images with Display Properties

I have created a unique slideshow that overlays multiple images using JavaScript to change their opacity and attributes. You can view the slideshow here: Upon inspection (using firebug), I noticed an issue with how the images are displayed. When the displ ...

htmlcss

Having trouble locating specific elements on Yahoo News with Selenium in Python?

I am currently facing some challenges with extracting comments from Yahoo News using Selenium. I have successfully clicked on the comments button to open it, but now I am struggling to locate the text of the comments section. from selenium import webdriver ...

pythonhtmlselenium-webdriverweb-crawler

Unusual anomalies observed in CSS navigation bar styling

During my CSS work on a navigation bar, I came across an unusual behavior. First Attempt: #nav li { display: inline-block; } #nav li { font-size: 1em; line-height: 40px; width: 120px; height: 40px; ...

csshtml

Ensure that the div stays in the same position regardless of the screen resolution

On my webpage, I have a page header with a select menu that needs to be properly positioned on top of the background image. How can I ensure it stays in place when the screen resolution changes? Here is how it looks on a larger resolution: <div c ...

htmlcss

When an image is loaded, use Jquery to automatically open a new tab, instead of

I need to implement a function where, on loading an image on a page, a new tab opens and starts downloading a file from a specific URL while keeping the original page open. This task is part of a WordPress site with a jQuery section in the backend. I' ...

javascriptjqueryhtmlwordpress

Addressing a jquery.ajax relative path problem

I am a newcomer to this topic and I have been researching extensively online for more information. I would like some further insight into the following issue: I am attempting to retrieve a JSON file located one level down from the directory where `index.h ...

jqueryhtmlajax

Having issues displaying the & symbol in HTML from backend data

I recently worked on a project using express handlebars, where I was fetching data from the YouTube API. However, the titles of the data contained special characters such as '# (the ' symbol) and & (the & symbol). When attempting to render the ...

javascripthtmlnode.jsexpresshandlebars.js

What is the appropriate method for passing parameters in PHP and how can you handle returned empty values

I'm looking to pass parameters in the action method because I am unable to do so via the header. <form name="mailinglist1" method="post" action="report1.php" > In this form, I'm using a download button to connect my report (HTML). ...

phphtmlcodeigniter

Enhance the appearance of a dropdown selection using CSS

I am interested in customizing the appearance of the first option (Search Clubs) to be bold, while keeping the rest with normal font weight. Currently, I am able to make the first option bold, but it only appears that way after clicking the dropdown menu ...

cssdrop-down-menu

Is it possible to change the background color using jQuery?

Can you assist me with this: I have a website and I am looking to modify the bg-coler when hovering over the menu (similar to how it works on the rhcp-website). I attempted using jquery for this, but unfortunately, it did not yield the desired result.. ( ...

javascriptjqueryhtmlcssjquery-hover

Modify the text field's color when it is in a disabled state

When the text field is disabled, I want to change its color. Below is the code I have written for enabled and disabled states. The style works correctly when the text field is enabled. const StyledTextField = styled(({ dir, ...other }) => <TextFiel ...

cssreactjsmaterial-ui

What is the best way to showcase a PDF file on a webpage with multiple thumbnails using JavaScript or jQuery?

I recently undertook a project at work that involved displaying multiple PDF thumbnails/images on a webpage. These files were dynamically loaded from a directory on my system. Each thumbnail corresponded to a PDF file stored in a different directory. My g ...

javascriptphpjqueryhtmlpdf