Issue with displaying elements at intended layering order when parent element has fixed positioning

Question

Issue with displaying elements at intended layering order when parent element has fixed positioning

My web app features both upper and lower elements (div) with a position: fixed. Each element has child popups also with position: fixed.

Even though I want to position the popup above its parent element, using z-index doesn't work due to inheritance from the parents.

I've searched on Stack Overflow for a solution to this issue but haven't found one that addresses it directly.

You can view the HTML/CSS code at: https://jsfiddle.net/pLsdspon/

<html>
<head></head>
<body style="height: 100%;">

  <div style="
        background-color: red;
    position: fixed;
    display: block;
    width: 100%;
    height: 50%;
    top: 0%;
    z-index: 2; ">
Top
    <div style="
    background-color: pink;
    position: fixed;
    display: block;
    width: 80px;
    height: 200px;
    top: 40%;
    left: 100px;
    z-index: 20; ">
      PopUp-Top - Need to be on top!
    </div>
  </div>

  <div style="
    background-color: green;
    position: fixed;
    display: block;
    width: 100%;
    height: 50%;
    top: 50%;
    z-index: 2; ">
Bottom
    <div style="
    background-color: lightgreen;
    position: fixed;
    display: block;
    width: 80px;
    height: 200px;
    top: 40%;
    left: 200px;
    z-index: 20; ">
      PopUp-Bottom - Need to be on top!
    </div>
  </div>

</body>
</html>

html css css-position z-index

Answer 1

Answer №1

The issue with the z-index not behaving as expected is due to having nested divs, rather than the position being fixed. Instead of nesting the popup div inside another, why not place them outside (ontop) of the others? https://jsfiddle.net/7efx38um/1/

<html>
<head></head>
<body style="height: 100%;">

<div style="
background-color: red;
position: fixed;
display: block;
width: 100%;
height: 50%;
top: 0%;
z-index: 1;
">
Top
</div>
<div style="
background-color: pink;
position: fixed;
display: block;
width: 80px;
height: 200px;
top: 40%;
left: 100px;
z-index: 20;
">
PopUp-Top - Need to be on top!
</div>

<div style="
background-color: green;
position: fixed;
display: block;
width: 100%;
height: 50%;
top: 50%;
z-index: 1;
">
Bottom
</div>
<div style="
background-color: lightgreen;
position: fixed;
display: block;
width: 80px;
height: 200px;
top: 40%;
left: 200px;
z-index: 20;
">
PopUp-Bottom - Need to be on top!
</div>

</body>
</html>

You can also consider placing both the banner and popup divs inside separate dummy containers, so they won't share styles and z-index values ;)

'

Answer 2

The issue with the z-index not behaving as expected is due to having nested divs, rather than the position being fixed. Instead of nesting the popup div inside another, why not place them outside (ontop) of the others? https://jsfiddle.net/7efx38um/1/

<html>
<head></head>
<body style="height: 100%;">

<div style="
background-color: red;
position: fixed;
display: block;
width: 100%;
height: 50%;
top: 0%;
z-index: 1;
">
Top
</div>
<div style="
background-color: pink;
position: fixed;
display: block;
width: 80px;
height: 200px;
top: 40%;
left: 100px;
z-index: 20;
">
PopUp-Top - Need to be on top!
</div>

<div style="
background-color: green;
position: fixed;
display: block;
width: 100%;
height: 50%;
top: 50%;
z-index: 1;
">
Bottom
</div>
<div style="
background-color: lightgreen;
position: fixed;
display: block;
width: 80px;
height: 200px;
top: 40%;
left: 200px;
z-index: 20;
">
PopUp-Bottom - Need to be on top!
</div>

</body>
</html>

You can also consider placing both the banner and popup divs inside separate dummy containers, so they won't share styles and z-index values ;)

'

Answer 3

Answer №2

It appears that the task at hand is proving to be quite challenging.

#Krypton's proposed solution tackles the issue by adjusting the html structure; unfortunately, this approach is not feasible in my specific scenario.

The sequence of elements, known as the Stacking Order, operates based on the following principles:
1. Elements without z-index or position follow the order in which they appear in the html markup.
2. Positioned elements (relative, absolute, and fixed) take precedence over non-positioned elements (static).
3. The use of z-index impacts positioned elements and establishes a Stacking Context.

In a Stacking Context, elements with a shared parent form this context under the following conditions:
1. The root document element (<html>).
2. Positioning with z-index.
3. Elements with opacity less than 1 (a lesser-known fact among web developers).
Elements within a Stacking Context maintain their relative stacking order, preventing an element inside one context from appearing above another if the latter has a higher stacking order, even with a high z-index value.

Updates: Recent CSS properties creating Stacking Context include: transform, filter, css-region, and pages_media.

Order within a Stacking Context:
1. Root element
2. Positioned element with negative z-index.
3. Non-positioned elements following the html markup order.
4. Positioned elements.
5. Positioned elements with z-index sorted by their values.

Returning to the example, both the red and green divs establish a Stacking Context due to being positioned (fixed) with z-index.
Given their identical z-index values (2), the red div will be situated beneath the green div per the html order.
Considering the pink and lightgreen elements nested within red and green respectively, the stacking order dictates all elements within red to be lower than those within green.

To resolve this matter, introducing a new element to create a Stacking Context with a higher order than the red and green divs, allowing for the placement of popups within that element, is recommended.

For more insights, refer to "What No One Told You About Z-Index" by Philip Walton:

Answer 4

It appears that the task at hand is proving to be quite challenging.

#Krypton's proposed solution tackles the issue by adjusting the html structure; unfortunately, this approach is not feasible in my specific scenario.

The sequence of elements, known as the Stacking Order, operates based on the following principles:
1. Elements without z-index or position follow the order in which they appear in the html markup.
2. Positioned elements (relative, absolute, and fixed) take precedence over non-positioned elements (static).
3. The use of z-index impacts positioned elements and establishes a Stacking Context.

In a Stacking Context, elements with a shared parent form this context under the following conditions:
1. The root document element (<html>).
2. Positioning with z-index.
3. Elements with opacity less than 1 (a lesser-known fact among web developers).
Elements within a Stacking Context maintain their relative stacking order, preventing an element inside one context from appearing above another if the latter has a higher stacking order, even with a high z-index value.

Updates: Recent CSS properties creating Stacking Context include: transform, filter, css-region, and pages_media.

Order within a Stacking Context:
1. Root element
2. Positioned element with negative z-index.
3. Non-positioned elements following the html markup order.
4. Positioned elements.
5. Positioned elements with z-index sorted by their values.

Returning to the example, both the red and green divs establish a Stacking Context due to being positioned (fixed) with z-index.
Given their identical z-index values (2), the red div will be situated beneath the green div per the html order.
Considering the pink and lightgreen elements nested within red and green respectively, the stacking order dictates all elements within red to be lower than those within green.

To resolve this matter, introducing a new element to create a Stacking Context with a higher order than the red and green divs, allowing for the placement of popups within that element, is recommended.

For more insights, refer to "What No One Told You About Z-Index" by Philip Walton:

Issue with displaying elements at intended layering order when parent element has fixed positioning

Answer №1

Answer №2

Similar questions

Utilizing JSON for HTML conversion in Codeigniter

I'm having trouble with aligning my input checkbox within the form

Changing the color of a tooltip for a specific element using Bootstrap 4

Operating PHP program from html on Beaglebone Black Rev C Debian

Steps for updating images and text on a live webpage after launching the web application

Show the file name in the email signature instead of displaying the image

Creating CSS Effects for Text Hover and Transition

Is there a way to create an image gallery layout similar to Pinterest using CSS?

What is the best way to incorporate the icon directly from the .svg sprite into CSS/SCSS?

Custom-designed background featuring unique styles

Adjusting the display property using the CSS plus symbol operator

Tips for automating file uploads in HTML

Trouble Viewing Images on Website

jQuery selector unable to locate the specified class in the table row

What is the best way to ensure the second navbar stays at the top when scrolling, after the first one?

Display information from a MySQL database in a tabular format using PHP

Passing data from the <ion-content> element to the <ion-footer> element within a single HTML file using Ionic 2

Tips for making nested sliding divs within a parent sliding div

Issue with Jquery addClass method in Firefox

Having trouble with PHP form not functioning correctly?