The functionality of z-index is not applying when using position fixed

I have the following CSS code:

#one{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
}
#two{
    position: relative;
    z-index: 9;
    width: 200px;
    height: 200px;
    background: red;
}
#link {
position: relative;
z-index: 9999999; /* why is this not on a higher layer? */
}

I cannot increase the z-index of #two for my design.

Despite assigning a higher z-index to #link, it's not appearing on a higher layer.

So, why is the fixed position blocking the z-index layering?

Link to jsfiddle

If #one was not positioned fixed, it would work fine. Hence, why does the fixed position cause this bug?

css

Answer №1

Why does the fixed position of an element block the layer (z-index)?

This occurs due to The concept of stacking context. When CSS positioning and a z-index value are applied to an element, a new stacking context is created.

According to MDN's explanation:

Important: The stacking context hierarchy is a portion of the HTML elements hierarchy.

So, in your specific scenario:

<div id="one">
    <div id="overlay"></div>
</div>
<div id="two">
    <a href="#" id="link">test</a>
</div>

The stacking contexts hierarchy would be as follows:

  • Root
    • #one
    • #two
      • #link

Therefore, #link would be positioned below #one, regardless of its specified z-index value.

An option is to increase the z-index value of the #two element (higher than #one).

Answer №2

Are you interested in having a hover effect for the link #two? Is that something you would like to implement?

test 

#one{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}
#two{
    position: relative;
    z-index: 2;
    width: 200px;
    height: 200px;
    background: red;
}
#link{
    position: relative;
    z-index: 9999999;
}
<div id="one">
    <div id="overlay"></div>
</div>
<div id="two">
    <a href="#" id="link">test</a>
</div>

http://jsfiddle.net/0q84xq87/1/

Answer №3

Make sure to include the z-index property for the parent container div

#two{
    position: relative;
    z-index: 9;
    width: 200px;
    height: 200px;
    background: red;
    z-index: 9999;
}
#link{
    position: relative;
}

Answer №4

Due to the dependent nature of #link's z-index on its parent element #two, both #one and #two inherit their z-index values from the common ancestor body.

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

Stick your navbar to the top with Bootstrap 4

I have a bootstrap 4.1 navbar set up and I'm trying to ensure that my div "#pin_to_top" always stays at the top of the navbar. This way, on wider screens, it will be displayed as: Logo - Menu - "#pin_to_top" (all in one row) And on smaller devices, ...

htmlcssbootstrap-4

Adjust the column count in mat-grid-list upon the initial loading of the component

My goal is to implement a mat-grid-list of images with a dynamic number of columns based on the screen size. Everything works perfectly except for one small glitch – when the grid first loads, it defaults to 3 columns regardless of the screen size until ...

javascriptcssangulartypescriptangular-material

Contact form in Bootstrap 5 lacks responsiveness

I am currently exploring Bootstrap 5 for my website design project, and one of the features I have implemented is a contact form. While the white arrow that separates the two sections blends in seamlessly on desktop and laptop screens, it doesn't quit ...

htmlcssresponsive-designfrontendbootstrap-5

What causes the width of unrelated cells to change when the contents of colspan'd cells expand in IE7?

Before we delve into the details, I invite you to take a look at this fiddle using IE7. It's quite intricate and not something I want to repeat here. The main issue is that clicking on the red block should display additional information. The top row ...

cssinternet-explorerinternet-explorer-7

Issue with DIV positioning in IE when another DIV is animated downwards

Here's how my page structure looks like: <header> <div class="slide"> <!---- some elements here ---> </div> <nav> <ul> <li id="open"></li> <! --- other parts of the navigation ...

jqueryhtmlcssinternet-explorer

The grid layout in Bootstrap 4 does not seem to be compatible with dompdf

I am in the process of using dompdf for rendering a PDF file. Our application is built on Bootstrap 4 framework, and I want to incorporate it into the twig template used for generating our documents. However, I have encountered an issue with the Bootstrap ...

htmlcsspdfbootstrap-4dompdf

Seeking assistance with creating a form that is centered on the page

As a newcomer here, I am in the process of learning new things. My current challenge is to create a center form. Here is what I have experimented with so far: <!doctype html> <html lang="en> <head> <meta charset="utf-8"> &l ...

htmlcssbootstrap-5

Hide the popup menu when the user clicks outside of it

I am presenting the following code <!DOCTYPE html> <html> <head> <title>GalacticCraft</title> <link rel="stylesheet" type="text/css" href="style.css" /> <link rel="shortcut icon" type="image/png" href="fa ...

javascripthtmlcss

Setting the height of the Bootstrap Navbar to accommodate the logo

I've designed a navigation bar with a logo, but the placement of the logo is not right (refer to the image). I am aware of how to resize the image to fit within the navbar, however, I intend to adjust the height of the navigation bar to align with the ...

htmlcsstwitter-bootstrapnavbarnavigationbar

Using jQuery's slideToggle feature to hide content when clicked again or when a different button is

I have a challenge with creating toggle buttons that require specific functions: 1) Display content on the first click (this is working) 2) Conceal content when another button is clicked (this is also working) 3) Hide content on the second click (this i ...

javascriptjqueryhtmlcss

Spinning with animation in jQuery

Greetings! I am in the process of creating a popup box that will appear upon clicking the Login button. My aim is to produce a popup box with a rotating effect, however, my attempts have not been successful so far. You can view the code snippet on JsFidd ...

jquerycssrotationcss-transitions

Trouble with Unveiling the Secondary Accordion

I am having issues adding a second accordion next to the existing one. Even though the code is working fine in the tryit editor v3.6 online, it doesn't seem to display correctly for me. I have made sure that I am using the latest versions of all scrip ...

htmlcssbootstrap-4

The _rfs.scss width rule in Angular-Bootstrap-NgBootstrap is overriding the column width of the col-rules

The Dilemma I am currently working on an Angular project that incorporates Bootstrap and ng-bootstrap. My intention is to utilize the grid system within this project, but I encountered some bugs along the way. When trying to render the following HTML/TS ...

cssangularsassbootstrap-5ng-bootstrap

Customizing Sass Bootstrap Variables for Tailored Responsive Designs (Specifically for Mobile or Desktop)

Currently, I am in the process of working on a website that has opted for the adaptive approach, using separate mobile and desktop templates instead of responsive design. Despite this choice, Bootstrap is still being utilized on these templates, loading al ...

csstwitter-bootstrapsassbootstrap-sass

Choosing from a list in Angular

I'm trying to make a dropdown menu that shows options in the format "code-description", but only displays the "code" portion when an option is selected. For example, showing "A-Apple" in the dropdown, but displaying only "A" when chosen. I am able to ...

javascripthtmlcssangulartypescript

The image on Bootstrap isn't showing up

Can someone please help me troubleshoot why my logo image is not showing up? I can't figure out why the min and max width/height parameters are not working as intended. Here is my HTML: <div class="container-fluid"> <div class="head"> ...

htmlcsstwitter-bootstrap

Use JQuery to constantly monitor for any changes in HTML Div

I am dealing with a browser-based chat application where separate div elements are generated for each chat conversation. An external module oversees the entire chat process, and I do not have access to its underlying code. It is important to note that the ...

jqueryhtmlcssdom

Ways to ensure the menu remains fixed on a fluid website

Is there a way to prevent the main-menu from moving to a second line when resizing the page down, while still maintaining fluidity? Thank you, Ken ...

css

Minimize all expanded containers in React

Although I've come across similar questions, none of them have addressed mine directly. I managed to create a collapsible div component that expands itself upon click. However, I am looking for a way to make it so that when one div is expanded, all o ...

javascripthtmlcssreactjs

The loading cursor in IE7 flickers incessantly, causing the webpage to lag and become un

When I move my cursor and click in text fields, the page becomes unresponsive and shows a wait cursor. If you're curious to see this issue in action, check out this video. This problem is specific to IE7. I've attempted to identify any ajax re ...

javascriptcssinternet-explorer-7