The overlay within a flex container does not extend to cover all subsequent flex boxes

Let's examine the html and css code below:

<div class="page">
  <div class="region"> 
    <div class="zone">
      Left
    </div>
    <div class="zone">
      Center
    </div>
    <div class="zone">
      Right
    </div>
  </div>
  <div class="region">
    <div class="zone">
      Left
    </div>
    <div class="zone">
      Right
      <div id="overlay"></div>      <!--- Overlay -->
    </div>
  </div>
  <div class="region">
    <div class="zone">
      Left
    </div>
    <div class="zone">
      Center
    </div>
    <div class="zone">
      Right
    </div>
  </div>
</div>

.page {
  background-color: #333;
  height: 100vh;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 10px;
}

.region {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  padding: 10px 0px;
  position: relative;
  z-index: 0;
  gap: 20px;

  &:first-of-type {
    padding-top: 0px;
    height: 130px;
  }

  &:nth-of-type(2) {
    height: calc(100vh - 245px);
  }

  &:last-of-type {
    padding-bottom: 0px;

  }
}

.zone {
  display: flex;
  flex-direction: column;
  flex: 1;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 10px;
  padding: 0px 10px;
  background-color: #0000ff33;

  &:first-of-type {
    padding-left: 20px;
  }

  &:last-of-type {
    padding-right: 20px;
  }
}

#overlay {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 1000;
   background: #ffffff66;
}

Link to a live example: https://codepen.io/a11smiles/pen/rNQoaPv

An issue is identified where the overlay obscures the content of the top and middle flex-boxes, but not the footer. Despite setting the footer's z-index explicitly to 0, the overlay remains behind it. What could be causing this behavior?

Your insights are appreciated.

htmlcss

Answer №1

If you want the Overlay to cover the entire viewport, you can follow these steps:

  • Avoid using z-index: 0; for other elements
  • Position the overlay outside of your elements, such as in the body

Check out the first solution provided below:

* {margin: 0; box-sizing: border-box;}

.page {
  background-color: #333;
  height: 100vh;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 10px;
}

.region {
  display: flex;
  flex-wrap: nowrap;
  padding: 10px 0px;
  position: relative;
  /* z-index: 0;         /* REMOVE! */
  gap: 20px;

  &:first-of-type {
    padding-top: 0px;
    height: 130px;
  }

  &:nth-of-type(2) {
    height: calc(100vh - 245px);
  }

  &:last-of-type {
    padding-bottom: 0px;

  }
}

.zone {
  display: flex;
  flex-direction: column;
  flex: 1;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 10px;
  padding: 0px 10px;
  background-color: #0000ff33;

  &:first-of-type {
    padding-left: 20px;
  }

  &:last-of-type {
    padding-right: 20px;
  }
}

#overlay {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 1000;
   background: #ffffff66;
}
<div class="page">
  <div class="region">
    <div class="zone">
      Left
    </div>
    <div class="zone">
      Center
    </div>
    <div class="zone">
      Right
    </div>
  </div>
  <div class="region">
    <div class="zone">
      Left
    </div>
    <div class="zone">
      Right
      <div id="overlay"></div>
      <!--- Overlay -->
    </div>
  </div>
  <div class="region">
    <div class="zone">
      Left
    </div>
    <div class="zone">
      Center
    </div>
    <div class="zone">
      Right
    </div>
  </div>
</div>

Answer №2

.page {
    background-color: #333;
    height: 100vh;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 10px;
    position: relative; /* Include this line to establish a new stacking context */
    z-index: 1; /* Incorporate this line to define the z-index of the new stacking context */
}

/* Keep the rest of your CSS unchanged */

The challenge with the overlay not extending over the footer flex-box and its content arises from the stacking context formed by the z-index property and the position property utilized in the CSS.

To solve this issue, you can introduce position: relative; z-index: 1; within the .page class. By doing so, a fresh stacking context will be established for the entire page, enabling an overlay with z-index: 1000 to appear above all elements within this newly created stacking context, including the footer flex-box.

Answer №3

Make sure to update the style for '.region' as follows (including '&:last-of-type')

.region {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  padding: 10px 0px;
  position: relative;
  z-index: 1;
  gap: 20px;

  &:first-of-type {
    padding-top: 0px;
    height: 130px;
  }

  &:nth-of-type(2) {
    height: calc(100vh - 245px);
  }

  &:last-of-type {
    padding-bottom: 0px;
    z-index: 0;
  }
}

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 position a collection of images together for optimal

I'm a new web developer and I'm struggling with aligning images on my page. I've added the images successfully, but I want them to fill the entire space of the previous div. I'm not concerned about the aspect ratio, just the alignment. ...

htmlimagebootstrap-4thumbnails

Utilize JavaScript to eliminate tags lacking identifiers

Although I am new to javascript, I believe it can help me achieve the desired results. I have an ordered list displayed as: <div class ="level-section" style=""> <td><a> <td><a> <td><a> </div> < ...

javascriptparenthtml

eliminate gaps between hyperlinks using cascading style sheets

I developed a webapp for iOS which has a specific page containing a centered div with 3 buttons. Inside this div, there is a total of 460px with each link measuring as follows: the first and last are 153px while the middle one is 154px. The main issue ar ...

htmlcss

Can JavaScript be used to continuously monitor a window variable object in real-time?

Is there a way to dynamically control a variable in JavaScript? I'm currently working on a code that needs to display a button when it reaches the last signature of an automatic request process. The code for activating/deactivating the button is show ...

javascriptjqueryhtml

C++ HTML parsing tool inspired by Jsoup

In my quest to extract data from various web pages using Java, I relied on the Jsoup library for its efficiency. However, I now face the challenge of having to convert my code to C/C++. The problem is, I'm struggling to find a suitable HTML parser for ...

c++htmlcss-selectorsjsoup

Modify CSS when scrolling, based on the size of the screen

I've implemented this JQuery script to modify elements in my header as the user scrolls. Is there a way to limit these modifications based on the screen size? Here's the code snippet: $(window).scroll(function() { // Once the user has scro ...

jqueryhtmlcssscroll

Adjust the size of the image within a designated container to decrease its proportions when there is an excess of text present

I am working on a project where I need to resize an image based on the available space within its container. When there is text in the description, the image should adjust its size accordingly without pushing the text upwards. I am using React for this pro ...

javascripthtmlcssreactjs

Error occurs when checkboxes are left unchecked in CherryPy web form

Currently, I am in the process of creating a straightforward web form using CherryPy in Python 3.5 to interact with an sqlite3 database, which requires input of various data types. I encountered an issue where leaving checkboxes unchecked resulted in an er ...

pythonhtmlsqlitenullcherrypy

What is the best way to showcase nested arrays in JSON by utilizing $.each?

I am currently facing an issue with a JSON file that contains five array fields for an article: id, title, body, cover image, and url. The problem lies within the body array, which has three embedded array objects (plaintext, pull_quote, and h2) that are n ...

javascriptjqueryhtmlarraysjson

Tailored Admin Styles/Themes for Pimcore

I'm attempting to customize the appearance of the admin interface for Pimcore 5. After consulting the Pimcore 5 documentation on Plugin Backend UI (along with additional research that I can't currently replicate), it appears that creating a plugi ...

phpcsscustomizationpimcorepimcore-v5

Can you explain the concept of a composite foreign key within a MySQL database?

While browsing through the documentation of a framework I use (yii), I came across the term "composite foreign key." Can someone explain what exactly a composite foreign key is in the context of a mySql database? (I assume that it involves a relationship ...

phpmysqlhtmlsqlyii

Minimize the expansive width of Shiny Dashboard's sidebar for

I'm facing a challenge in hiding a shinydashboard sidebar with a wider width. Upon increasing the width, however, the sidebar isn't completely disappearing from the screen. Here's an example that illustrates the issue I'm trying to add ...

htmlcssrshinyshinydashboard

HTML - Detecting Mouse Movements on Hyperlinks

How can we make an input item appear when a link is clicked with the mouse, and then disappear when anything else on the page is clicked? Edit - Added example Edit 2 - Fixed Example <html> <head> <style> #sch{ display:none; } </style ...

htmlinputhyperlinkmouseevent

Ninja Flip ComboButton

I am looking to enhance the functionality of a toggle button within a web application that was developed using the JS Dojo API. Currently, the button is utilizing dijit.form.ToggleButton, but I need it to include an additional feature for a dropdown menu w ...

htmlcssdojo

Trigger an event whenever one section of a div intersects with another section of a different div

I currently have a couple (or possibly more) DIV elements that are animated using jQuery, causing them to move around my screen in pseudo random patterns. Is there a way for me to trigger an event whenever one DIV overlaps with another? I'm open to s ...

javascriptjqueryanimationhtmleventtrigger

The Dropdown Menu is displaying correctly in Chrome, but is being obscured by an image in Safari

While the Nav dropdown menu functions correctly in Chrome, an issue arises in Safari where the image covers the rest of the menu. This discrepancy between browsers is puzzling. Why does this problem only occur in Safari when it displays properly in Chrome? ...

javascripthtmlcssgoogle-chromesafari

Transform line break <br /> in jQuery into a new line using

In my current project, I am utilizing jQuery 1.11. One of the tasks I have is to take a string displayed in HTML and duplicate it in a textarea element. The challenge arises when the string contains a line break represented by <br />. To properly s ...

jqueryhtmlreplace

What could be the reason for the individual components not being populated within the listItem?

*** I am iterating through an array and calling the ListItem component for each item. However, only one ListItem is being populated when there should be 3. Can someone please help me figure out what's wrong? *** Here is my code in App.js *** import F ...

javascriptcssreactjs

Tips for meeting a JavaScript door unlocking condition with an HTML button

In this tutorial, the https://www.w3schools.com/nodejs/nodejs_raspberrypi_webserver_websocket.asp link demonstrates an event handler that works based on an HTML checkbox. I am interested in achieving a similar functionality, but with a button instead, to t ...

javascripthtmlnode.jssocket.ioraspberry-pi

When the window is resized, elements overlap with one another

I need help with organizing the header section on my website, which includes: Logo Login and Register buttons Menu Language picker I want to display them all in a single row, but I'm having trouble as they overlap when I resize the window. Specific ...

cssbootstrap-4