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

What is the best way to make background SVGs tile seamlessly within the cells of a table?

I am currently dealing with a series of table cells that are filled with various colors and styles. The issue I'm facing is getting the styles to tile properly, as they are not seamlessly continuing from one cell to the next even if they share the sam ...

htmlcsssvg

detecting syntax errors in CSS with @media queries and keyframes

/*general CSS setting for all device types above hd*/ * { margin: 0; padding: 0; } #watchonly { display: none; } ...

csshtml

The updated version of Angular from 13 to 16 has implemented a new default value for primary colors

I recently upgraded my angular (+material-ui) system from version 13 to 16, and encountered an issue with the primary color of my custom theme. It seems that the value is no longer being recognized and defaults to blue. After updating the angular version, ...

cssangularsass

Creating a 3x3 grid with CSS grid is great, especially when you want to place items in specific columns within the grid

I'm attempting to design a layout that has a unique structure: The blue rectangles are represented by divs. It's like a 3x3 grid, but with spaces in the 3rd and 4th columns of the grid. How can I incorporate these gaps using CSS grid to achieve ...

htmlcsscss-grid

The columns in the table are all displaying varying widths even though they have been defined with fixed table layout

I have a nested table displayed in my HTML, and I am attempting to set each column to be 50% width, but for some reason it's not working. In the past, whenever I've needed to accomplish this, applying table-layout: fixed has usually done the tri ...

cssangular

Having trouble with a dropdown menu that allows for multi-select options?

var expanded = false; function showCheckboxes() { var checkboxes = document.getElementById("checkboxes"); if (!expanded) { checkboxes.style.display = "block"; expanded = true; } else { checkboxes.style.display = "none"; expanded = fa ...

javascripthtmlcssvue.jsng-dropdown-multiselect

Most effective approach to managing state in a React UI Component

I recently delved into the world of React. I've been using it to build a design system library for my work, which consists of standalone UI components tailored for use in React applications. I've developed a specific approach to managing the sta ...

cssreactjs

The text-center alignment in Bootstrap doesn't seem to be applying to buttons

After spending a considerable amount of time trying to center two buttons in Bootstrap, I came across the "text-center" class offered by Bootstrap. However, no matter where I include this class, it doesn't seem to have any effect on the alignment of t ...

javascripthtmlcsstwitter-bootstrap

Tips for enabling background scrolling when Popover is displayed: (React, React Native, Native-Base)

I'm utilizing the Popover component from NativeBase to design my popover: const SettingsButton: React.FC<Props> = () => { return ( <Popover trigger={(triggerProps) => { return ( ...

htmlcssreactjsreact-nativenative-base

Incorporate JavaScript to enable the transfer of text from one textarea to another upon clicking a button, while simultaneously clearing the original textarea

After working on the provided code, I have managed to create a functionality where text from one textarea is copied to another textarea when a button is clicked using JavaScript. <head> <script type="text/javascript"> function displayOut(){ ...

javascripthtmlcss

Move the Material UI popover to the clicked icon's position

I am looking to create a popover similar to the image linked below. When the icon is clicked, I want the popover to display with the same user interface. Here is the code snippet that I have been using: {showPopOver && ( <Popover ...

cssreactjsmaterial-uipopover

Making an element sticky within a container while the parent element is set to overflow hidden

Here is a case where I have generated HTML and CSS code that includes classes for overflow, container height, and sticky positioning: .overflow-hidden { overflow: hidden; } .overflow-x-auto { overflow-x: auto; } .container { max-height: 100px; ...

htmlcss

Is it possible for a relative div to automatically adjust its height when the height of the inner absolute div increases?

I am working with the following HTML code snippet: <div id="content"> <div id="leftcol"> <p>Lorem Ipsum</p> </div> </div> along with this CSS styling: #content { width: 780px; padding: 10px; position: relative; back ...

htmlcss

best practices for creating space between flexbox items

My task involves presenting a continuous scroll list of scheduled jobs using Angular Material. Each item in the list needs to be divided into three columns utilizing flexbox. Despite my efforts, I am struggling with adding space between the columns within ...

cssangularflexboxangular-materialangular-cdk

Preserving CSS styling while loading an HTML page with InnerHTML

By using the following code snippet, I have successfully implemented a feature on my website that allows me to load an HTML page into a specific div container when clicking a link in the menu. However, I encountered an issue where the background color of ...

javascriptcssajaxinnerhtml

The CSS top border is failing to display

For a school project, I've been attempting to add a top border to a set of hyperlinks in order to separate them from the title. However, after spending over an hour on this task, I still can't seem to get it to work. Below is the CSS code for th ...

htmlcssborder

What is the best way to create a flexible Ul-LI menu?

Is it possible to create a flexible menu where clicking on an item does not cover other items in the menu? #demo { margin: 30px 0 50px 0; font-family: sans-serif; } #demo .wrapper { display: inline-block; width: 180px; height: 20px; position ...

javascripthtmlcssdrop-down-menu

The Mui Switch track color fails to change when checked

I'm looking to customize the colors of the track for both checked and unchecked states. Currently, the track color is working for the unchecked state but defaults for the checked state: Checked State: https://i.stack.imgur.com/eGV4a.png Unchecked S ...

cssreactjsmaterial-ui

Connecting your HTML file to a CSS stylesheet

I'm struggling to connect my "index.html" file with my "stylesheet.css" file. I've tried copying the code from resources like CodeAcademy and w3schools, but nothing seems to be working. I'm currently using Notepad++ as my text editor - could ...

htmlcss

Stop images from flipping while CSS animation is in progress

I've been developing a rock paper scissors game where two images shake to mimic the hand motions of the game when a button is clicked. However, I'm facing an issue where one of the images flips horizontally during the animation and then flips bac ...

javascripthtmlcss