Browser fails to recognize z-index settings for overlay elements

Within the structure of my webpage, there exists a navigation bar that includes a button. By clicking this button, users can toggle a full-screen overlay on and off. The button itself transforms from displaying three bars to a cross icon when activated. For user accessibility, it is crucial that the button stays on top of the navigation bar so that it remains easily accessible for closing the overlay once it has served its purpose. Here is the code responsible for this functionality:

document.getElementById("navigation-toggle").onclick = function() {
  "use strict";
  document.getElementById("navigation-toggle").classList.toggle("navigation-toggle-animation");
  document.getElementById("navigation").classList.toggle("navigation-show");
};
#brandbar {
  // CSS styles here...
}

#brandbar-product {
  // CSS styles here...
}

#navigation {
  // More CSS styles here...
}

// Other CSS rules related to styling and animations...

*,
*:before,
*:after {
  box-sizing: border-box;
}


/* Reset Styles*/

body {
  background-color: #f3f3ee;
  color: #24292e;
  font-family: Roboto;
  padding-top: 120px !important;
  height: 100%;
  left: 0;
  margin: 0;
  padding: 0;
  top: 0;
  width: 100%;
}
<div id="brandbar">
  <div id="brandbar-product">

    <a href="https://www.digytool.com/" title="Go to Digytool"><img alt="The Digytool Icon" id="brandbar-product-icon" src="https://system.digytool.com/images/icon/digytool-white.png" title="Digytool Icon"></a>

    <h1 id="brandbar-product-text"><a href="https://www.digytool.com/" title="Go to Digytool">Digytool</a></h1>

  </div>

  <div id="navigation-toggle">
    // Button HTML code goes here...
  </div>


</div>

<div class="navigation-hide" id="navigation">
  Navigation content goes here...
</div>

The issue I am facing currently is that the button does not remain on top of the overlay, despite having a z-index value of 2 compared to the overlay's z-index value of 1. This problem persists across browsers like Chrome, IE / Edge, and Safari.

To clarify further...

  • #brandbar refers to the primary navigation bar on the page.
  • IDs such as #brandbar-product pertain to elements like the logo and icon within the navigation bar.
  • The overlay itself is represented by the #navigation ID.
  • Classes like .navigation-hide and .navigation-show control the visibility state of the navigation, with .navigation-hide being consistently applied to #navigation, while .navigation-show overrides it when active.
  • ID tags like #navigation-toggle manage the button used for toggling the overlay, including the associated animation to transform it into a cross icon.

If possible, could you shed some light on why the button is failing to maintain its position at the top of the page? Additionally, providing an example solution to rectify this issue would be greatly appreciated.

javascripthtmlcss

Answer №1

document.getElementById("menu-toggle").onclick = function() {
  "use strict";
  document.getElementById("menu-toggle").classList.toggle("menu-toggle-animation");
  document.getElementById("navigation-menu").classList.toggle("navigation-show");
};
#headerbar {
  background: #007cff;
  height: 80px;
  padding: 20px;
  position: fixed;
  top: 0;
  width: 100%;
}

#headerbar-product {
  float: left;
}

#headerbar-product-icon {
  float: left;
  height: 40px;
  margin-right: 20px;
}

#headerbar-product-text {
  float: left;
  font-weight: 500;
  line-height: 40px;
  margin: 0;
}

#headerbar-product-text a {
  color: #ffffff;
  text-decoration: none;
}

#navigation-menu {
  background-color: #000000;
  background-color: rgba(0, 0, 0, 0.9);
  color: #ffffff;
  left: 0;
  overflow: auto;
  position: fixed;
  top: 0;
  transition: 0.5s;
  width: 100%;
  z-index: 1;
}

.navigation-hide {
  height: 0%;
}

.navigation-show {
  height: 100%;
}

#menu-toggle {
cursor: pointer;
float: right;
height: 25px;
margin: 7.5px;
z-index: 2;
position: fixed;
top: 22px;
right: 20px;
}

#menu-bar-1,
#menu-bar-2,
#menu-bar-3 {
  background-color: #ffffff;
  height: 5px;
  transition: 0.5s;
  width: 25px;
}

#menu-bar-1,
#menu-bar-2 {
  margin-bottom: 5px;
}

.menu-toggle-animation #menu-bar-1 {
  -webkit-transform: rotate(-45deg) translate(-5px, 9px);
  transform: rotate(-45deg) translate(-5px, 9px);
}

.menu-toggle-animation #menu-bar-2 {
  opacity: 0;
}

.menu-toggle-animation #menu-bar-3 {
  -webkit-transform: rotate(45deg) translate(-5px, -9px);
  transform: rotate(45deg) translate(-5px, -9px);
}

*,
*:before,
*:after {
  box-sizing: border-box;
}


/* Reset Styles*/

body {
  background-color: #f3f3ee;
  color: #24292e;
  font-family: Roboto;
  padding-top: 120px !important;
  height: 100%;
  left: 0;
  margin: 0;
  padding: 0;
  top: 0;
  width: 100%;
}
<div id="menu-toggle">
    <div id="menu-bar-1"></div>
    <div id="menu-bar-2"></div>
    <div id="menu-bar-3"></div>
  </div>

<div id="headerbar">
  <div id="headerbar-product">

    <a href="https://www.mywebsite.com/" title="Go to Website"><img alt="The Icon" id="headerbar-product-icon" src="https://www.example.com/images/icon/example.png" title="Icon"></a>

    <h1 id="headerbar-product-text"><a href="https://www.mywebsite.com/" title="Go to Website">My Website</a></h1>

  </div>


</div>

<div class="navigation-hide" id="navigation-menu">
  Navigation<br> Navigation
  <br> Navigation
  <br> Navigation
  <br> Navigation
  <br> Navigation
  <br>
</div>

Answer №2

The issue with the close button not appearing above the overlay is due to how z-index functions only between siblings (elements that are adjacent to each other on the page) and not within children or ancestors.

In your HTML structure, navigation is a sibling of brandbar, but navigation-toggle is a child of brandbar and therefore not a sibling of navigation.

To resolve this, move the 

<div id="navigation-toggle">
element to the same level as 
<div class="navigation-hide" id="navigation">
. Then update the CSS for #navigation-toggle by adding:

position: fixed;
top: 22px;
right: 20px;

You can also remove the following unnecessary code:

float: right;
height: 25px;

Below is the modified version of your code:

document.getElementById("navigation-toggle").onclick = function() {
  "use strict";
  document.getElementById("navigation-toggle").classList.toggle("navigation-toggle-animation");
  document.getElementById("navigation").classList.toggle("navigation-show");
};
#brandbar {
  background: #007cff;
  height: 80px;
  padding: 20px;
  position: fixed;
  top: 0;
  width: 100%;
}
/* CSS styles omitted for simplicity */

*,
*:before,
*:after {
  box-sizing: border-box;
}


/* Reset Styles*/
/* Additional CSS rules omitted for brevity */
<div id="navigation-toggle">
  <div id="navigation-toggle-bar-1"></div>
  <div id="navigation-toggle-bar-2"></div>
  <div id="navigation-toggle-bar-3"></div>
</div>

<div id="brandbar">
  <div id="brandbar-product">
    <a href="https://www.digytool.com/" title="Go to Digytool"><img alt="The Digytool Icon" id="brandbar-product-icon" src="https://system.digytool.com/images/icon/digytool-white.png" title="Digytool Icon"></a>
    <h1 id="brandbar-product-text"><a href="https://www.digytool.com/" title="Go to Digytool">Digytool</a></h1>
  </div>
</div>

<div class="navigation-hide" id="navigation">
  Navigation
  <br> Navigation
  <br> Navigation
  <br> Navigation
  <br> Navigation
  <br> Navigation
  <br>
</div>

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

Tool tips not displaying when the mouse is moved or hovered over

I have customized the code below to create a multi-line chart with tooltips and make the x-axis ordinal. However, the tooltips are not displaying when I hover over the data points, and I want to show the tooltips only for the data in the variable. https:/ ...

javascriptd3.js

Why is it that the edit or delete button is not functioning when I attempt to click on the next page?

Having an issue with my script. It works fine for editing and deleting on the first page, but when I navigate to the next page, those functionalities stop working. Can anyone help me troubleshoot this problem? <script> $(function(){ $(&ap ...

javascriptphphtml

PHP is functioning properly, but no content is being displayed

I recently delved into coding and had to tackle a form that sends data through email using PHP. While the functionality of my form is working perfectly and I'm able to receive emails, I encountered an issue where the PHP page appears blank. Despite tr ...

phphtmlformsemail

To prevent the default alignment in case the text exceeds the input length, stop the automatic alignment

I have a query regarding an input field with a maximum length of 4 characters. The appearance is such that these 4 characters seem to be delineated by borders which are actually 3 lines displayed above the input field. When I enter the fourth character, a ...

javascriptjqueryhtmlcss

Error: webpack-cli encountered an unrecognized argument along with a syntax error

Hello, I am currently delving into the realm of prestashop theme development. After setting up my local environment successfully, everything seems to be working fine. My next step is to create a new theme based on the classic default theme. Upon navigat ...

javascriptnode.jsnpmwebpackwebpack-cli

JSPM encountered an issue with installation from GitHub (404 error), but it is able to successfully install packages from npm

I am encountering a frustrating issue with my Package.json file for a GitHub repository in my organization. Attempting to pull it in via jspm is causing errors. { "name": "tf-modernizr", "version": "1.0.0", "description": "", "main": "modernizr.js ...

javascriptgithubnpmjspm

Inject the content loaded from the server into a div element, and insert that div at the

I am trying to insert the div(#loadmore) element inside the div(#boxchatting) element when the content from "result.php" is loaded into div(#boxchatting). Here is the code I used: $('#loadmore').prependTo('#boxchatting'); $('#boxc ...

javascriptphpjqueryajax

What is the process for adding a Contact Us page to a website?

I recently created a website using html, css and Javascript. I would like to include a 'get in touch' page where visitors can send me messages directly on the site. What steps should I take to make this happen? Is it necessary to set up a databas ...

javascriptcss

Guide to adding a file upload progress bar to your website

Is there a way to enhance file upload experience on my web application beyond the usual animated gif? I'm currently using .Net, but open to platform agnostic solutions as well. ...

.netjavascriptajax

Updating a marker in real-time using API response

I'm trying to create a simple web application that allows users to enter a city name in an input box, which then triggers the updateMap function to geolocate and map the city with a marker. After mapping the city, another function called updateTemp is ...

javascriptjqueryajaxgoogle-maps

What sets onEnter apart from onStart in ui-router?

I am transitioning to the latest version of ui-router (1.0.0-alpha.5) and I am exploring how to utilize the onEnter hook versus the onStart hook: $transitions.onStart() as well as $transitions.onEnter() In previous versions, we only had the event $sta ...

javascriptangularjsangular-ui-router

Encountering issues with loading a module in Aurelia

I've encountered a peculiar issue while attempting to load a module using Aurelia. The moment library was successfully loaded for date formatting, but when trying to load the numeral library in the same manner with npm install <module> --save, i ...

javascriptnpmaurelia

Strange anomalies arising in frontend Apollo and GraphQL integration

Currently, I am working with nuxt.js and apollo. One issue I am facing is that when I click a button, it sends a request to the graphql server. The strange part is that the first time I click the button, everything works as expected. However, when I clic ...

javascriptvue.jsgraphqlnuxt.jsapollo

Scrolling triggers the click event

Within my JavaScript code, I have a rather simple event listener set up to listen for a click: element.addeventlistener('click', ()=>{ #do somthing }) However, I am encountering an issue on IOS (iPhone) where scrolling triggers the event list ...

javascriptiosuser-experience

Passing a value from a prop to a click event that is dynamically created within an SVG Vue.js

Currently, I am in the process of developing a map component using a JSON array and implementing a click event handler for each item. The objective is to toggle the CSS style to color the item when clicked, which is functioning as expected. However, my goa ...

javascriptcssvue.jssvgevents

Column header customization in el-table does not update reactively

Working with VueJS version 2.6.10 and Element-UI version 2.12.0, I have successfully displayed data inside an el-table component. Everything is going well so far. I am looking to add input fields in the column headers for filtering the data, but I only wa ...

javascriptvue.jselement-ui

Guide to generating an array in JSON format within a dropdown menu option

Struggling to create a JSON array with select options instead of text fields? You're not alone. Spend hours trying to figure it out but still no luck? Take a look at this code snippet: function createJSON() { result = []; $("select[class=emai ...

javascriptjqueryarraysjson

"Learn the process of converting HTML content into a string in an Android application and then displaying

I utilized this/this to Print Receipts in part of POS(Point of Sale) from EPSON Printer Obtaining data Json from URL (within the Json Object is html print template): { "response": { "status": "<table>.... </table>" } } Hence, ...

androidhtmlurlprintingplaintext

Describing how to assign multiple variables in a VUEX mutation

store.js import Vue from 'vue'; import Vuex from 'vuex'; import userStore from './user/userStore.js'; import VuexPersist from "vuex-persistedstate"; Vue.use(Vuex) const debug = process.env.NODE_ENV != ...

javascriptvue.jsvuex

css code creates a stable block with a blurred transparent effect

I need assistance with creating a transparent fixed header using only CSS and no JS. I attempted to use ::before for creating a blur effect with a negative z-index, but so far, my attempts have failed. I know how to achieve this using jQuery, but I am spec ...

htmlcssfilterblur