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:

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

  • 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

Tips for emphasizing active tabs in Angular 6

**I have everything displaying perfectly, but I am wondering how to highlight the active tab without using any third-party components. Any assistance would be greatly appreciated. Thank you.** <ul class="tabs"> <li [ngClass]=" {'active-tab ...

htmlangular

verifying the status of a checkbox with PHP (Terms and Conditions)

Struggling to figure out how to get the state of a checkbox using PHP. Spent hours searching on Google for solutions, but nothing seems to be working... The logic I need is to display an error message if the checkbox is not checked. Tried various methods ...

phphtmlcheckboxlogic

Vagrant Nimble Selections

Can anyone explain why my navigation bar is appearing below the header instead of beside the logo? I dedicated an entire day yesterday to designing a page with the same layout. Everything is identical in terms of design and coding, except that I initially ...

htmlcsslayout

Using the radius to determine the center point of the circle

<span class="qs">Q{{i + 1}} <a href="#question-view"></a></span> <div class="tooltipp text-center bubble[ngStyle]="bubbleStyle(prof?.proficiencyBrightness, prof?.proficiencyRadius)"> </div> In the illustration below, ...

htmlcssbootstrap-4

Avoiding double entries in the shopping list using DOM selectors in JavaScript

I have been struggling with preventing duplicate items from being added to a shopping list that I created. Even though I thought the code below would solve the issue, it hasn't been effective so far. My expectation was for the JavaScript code to acces ...

javascripthtmlcss

Is it achievable to use multi-level :not selectors in CSS / JS querySelector?

I have come across numerous tutorials explaining the use of multiple :not selectors on a single element. However, I have yet to find any examples of using :not selectors on different levels within a single CSS / JS querySelector path. For instance, conside ...

css

Binding iframes in Angular 6

Is there a way to display iframe code stored in a variable within a div? Here's the HTML code: <div class="top-image" [innerHTML]="yt"></div> And here's the TypeScript code: yt = '<iframe class="w-100" src="https://www.you ...

htmlangulartypescriptiframe

CSS - Problem with background image appearing stretched on Samsung mobile devices

Is the Samsung default "Internet Browser" based on another build? It seems to have trouble displaying stretched background images correctly, unlike desktop browsers or Chrome for mobile. Here is the CSS and HTML I am using: #bk_img { height:100%; ...

css

Utilizing the power of JavaScript/JQuery to showcase a compilation of all input values within an HTML form

I'm struggling to showcase all the input values from my HTML form on the final page before hitting the "submit" button. Unfortunately, I am facing a challenge as the values are not appearing on the page as expected. Despite several attempts, the valu ...

javascriptjqueryhtmlflask-wtforms

Leveraging background images in HTML and CSS to create interactive clickable links

I'm attempting to create the illusion of a clickable background image using HTML and CSS, following a tutorial I found here. Unfortunately, I'm encountering two issues: 1) The link is not fully covering the background image 2) The link does not ...

htmlcss

How can I include JavaScript in an HTML document?

My folder structure is as follows: Inside webapp/WEB-INF/some.jsp, I also have a javascript file located in the same directory at webapp/WEB-INF/js/myform.js. I referenced it in some.jsp like this: <script type="text/javascript" src="js/myform.js"> ...

javascriptajaxhtml

Tips for discovering the exact positions of child divs that are Nth siblings within a parent div

I have designed a new calendar interface with dynamic functionality. When the user clicks on any time slot displayed in IMAGE1, a span element is created dynamically to represent 8 hours starting from that clicked time. My question is, how can I access th ...

javascriptjqueryhtmlcss

Customizing media queries, Overriding styles from parent elements

Currently tackling a responsive website design challenge where I'm dealing with conflicting styles in media queries and parent css. Here's the CSS from the parent style sheet: .sec1 p { text-align: left; width: 55%; margin-left: 8%; float:lef ...

htmlcssresponsive-designmedia-queriesstylesheet

What is the best way to adjust the height of a div element according to the width of its child element?

I am facing an issue with two nested divs, where the inner one is absolutely positioned inside the outer one. I want the height of the outer div to adjust dynamically according to changes in the width of the inner div. To better illustrate the problem, I h ...

htmlcss

Clicking on the button will instantly relocate the dynamically generated content to the top of the page, thanks to Vue

Here is some dynamically generated content in the left column: <div v-for="index in total" :key="index"> <h2>Dynamic content: <span v-text="index + ' of ' + total"></span></h2> </div> There is also a butt ...

javascripthtmlvue.jsvuejs2vue-component

Retrieve the chosen option from a Select Dropdown and display it in a modal before carrying out the form submission

I need help figuring out how to send a warning message when a "delete" button is clicked on my webpage. I want the message to appear in a modal and display the selected value from a dropdown menu. Here is the code I have so far: <form action="elim ...

phphtmlformsbootstrap-5

Preventing clicks underneath in Internet Explorer with CSS overlay

I am currently working on creating an overlay that is specifically designed to display in versions of Internet Explorer lower than 9, prompting users to upgrade their browsers. The overlay and message are functioning correctly, but I am facing an issue wit ...

css

Changing the positions of objects on a resized HTML Canvas

I am currently developing a tool that allows users to draw bounding boxes on images using the Canvas and Angular. Everything was working smoothly until I encountered an issue with zooming in on the canvas causing complications when trying to draw bounding ...

javascripthtmlangularhtml5-canvas

Begin the process of setting up PDF.js on the website

I've been attempting to incorporate PDF.js into my website, but I'm struggling to do it correctly. When I try to display the PDF file on the screen, I encounter this issue: Although I can't see the PDF file on the screen, when I click on P ...

javascripthtmlpdfcakephp-2.5pdf.js

Utilize Css3 MediaQueries to nudge @Media switch for hyperlinks

My website currently utilizes css3-mediaqueries.js for a mobile-friendly design, which is working well. However, some users are still requesting to view the "web-version" instead. Is there a way to override the current CSS on the homepage, specifically the ...

cssmedia-queries