Overlay causing z-index conflict

I am struggling to create an overlay effect that is not displaying correctly.

.overlay {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: -1;
  width: 100%;
  height: 100%;
}
.center-div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
}
<div class="center-div">
  <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
  </p>
</div>
<div class="overlay">

</div>

The issue I am facing is getting the div with the center-div class to appear above the div with the overlay class.

Can anyone identify what's causing this problem?

css

Answer №1

.center-div is positioned above the .overlay.

To make it stand out, consider adding a background-color to the .center-div.

.overlay {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: -1;
  width: 100%;
  height: 100%;
}
.center-div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  background-color: white;
}
<div class="center-div">
  <p>
    Add your own content here...
  </p>
</div>
<div class="overlay">

</div>

Answer №2

It has been mentioned by others that .center-div is positioned above .overflow

By altering the font color to white, you can observe that it remains visible over the overlay

Explore this link for further details

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

Overflow: Scroll vertically and Visible horizontally

I'm struggling with a problem and can't seem to find a solution. https://i.sstatic.net/fw8C9.png My goal is to have the container scroll vertically only, while allowing overflow horizontally to display a dropdown menu. Is this even achievable? ...

javascripthtmlcsstwitter-bootstrap

Adjust website layout for screens less than 320px in width

Struggling to complete my project and having trouble figuring out how to scale my website for screens smaller than 320px, even though they are rare. I admire the solution used by Apple where the website freezes and scales down while maintaining its origin ...

htmlcssresponsive-designresponsiveviewport

Create a table with CSS styling that resembles a measuring scale

I am working on a for loop that will populate a table, similar to the diagram below: https://i.sstatic.net/xbZ8u.png Age is displayed in the first row as a header, followed by three rows with three columns each. The first row contains images, the second ...

htmlcssangular

What is the best way to expand a div in a downward direction exclusively?

My task involves a parent div containing a centered child div. My goal is to have the child div grow downwards only upon clicking it, not in both directions. Initial state of the two divs: https://i.sstatic.net/cWYyV.png Outcome after clicking on div 2: ...

javascripthtmlcss

"Enhance user interactions: Zooming in on input fields in

Currently, with the latest version of iOS (14.4), there is a zoom effect on any input box that receives focus, unless the input has a font size of 16px without focus. While this may not seem like an issue initially, once focus moves away from the input bo ...

htmlcssios

How can I change the background image using CSS instead of HTML?

I initially created a non-responsive website for an existing project. Now I need to convert it into a responsive site. I tried changing the logo image to make it responsive, but it's not working as expected. <td colspan="2" style="background-image ...

javascriptcsshtml

Tips for creating a collapsible side menu that doesn't disrupt the main page

https://i.sstatic.net/ReyZo.png https://i.sstatic.net/DPbVZ.png These images are just from a random website for demonstration purposes. I am trying to create a sidebar that expands without affecting the rest of the page. Any tips on how to achieve this ...

javascriptjqueryhtmlcsssidebar

What could be the reason for my Form styling failure?

Currently working on freecodecamp's portfolio creation exercise. It should be a straightforward task, but I'm facing a small issue that's puzzling me. I'm trying to remove the border and outline (when focused) from my contact-area form ...

htmlcssforms

What is the most effective method to arrange absolute divs generated randomly in a grid-like formation?

Hey there! I'm facing an intriguing challenge with my app. It's designed to generate a variable number of divs which are always in absolute positioning. Unfortunately, making them relative is not an option due to some other factors within the app ...

javascripthtmlcss

The link text does not appear in black color

Can anyone assist in modifying this code snippet? I'm trying to make the text appear black, but it's showing up as light grey on the Dreamweaver preview screen even though the CSS says it should be black. View Fiddle Below is my HTML code: < ...

csshyperlink

Make sure the bootstrap row extends to the full height of the page

I am currently working on a Django project and I am in the process of integrating Bootstrap into my HTML files. One issue I am facing is that the row in my HTML template is only as big as its content, but I want it to take up the entire height of the page ...

csstwitter-bootstrapbootstrap-4

Styles applied in the child component will have a cascading effect on the entire webpage

My webpage is divided into two parts: child1 and child2. Page Hierarchy: Parent Child1 Child2 Here are the CSS styles included in the page: Child1 -> z-index: 1 Child2 -> z-index: 2 What I want to achieve is to add a backdrop to the entire ...

cssangularangular7

No information available at the moment

When the data is not present, it displays as "display none"... However, I want it to show "no data found" This is the current code if (a.innerHTML.toUpperCase().indexOf(filter) > -1) { li[i].style.display = ""; } else { li[i].styl ...

javascripthtmlcss

How can I remove the arrow from a CSS selector?

I'm looking to enhance the appearance of a select element on my webpage, so I've crafted some custom CSS: .selectWebDropDown { background-color:Transparent; background: url(../Images/ddl_Normal.png) no-repeat right #FFFFFF !important; ...

htmlcss

The removal of classList.remove() only eliminates the class itself, not its contents

My goal is to add one class and remove another class when the start quiz button is clicked. While the 'info_box' class is successfully added, the 'start_btn' class does not get removed; it just changes position (from flex to no flex). T ...

javascriptcssbootstrap-4

Achieve full div coverage within parent container

I am seeking assistance with positioning divs correctly within my HTML structure: <div class="container"> <div class="item"> <div class="left"> lorem lorem </div> <div class="right"> ...

htmlcsslayoutcss-float

Display a series of numbers in a stylish Bootstrap button with uniform dimensions

I am trying to find a way to show the number of days in a specific month within a bootstrap button. However, the code I have been using does not evenly distribute the buttons in terms of height and width. I would like the display to look similar to the sc ...

javascripthtmlcssbootstrap-4

Displaying a division when a button is pressed

Despite my best efforts, I can't seem to get the chosen div to show and hide when the button is pressed. <button id="showButton" type="button">Show More</button> <div id="container"> <div id="fourthArticle"> <i ...

javascriptjqueryhtmlcss

The header grid will disappear in the p-dialog when the browser is minimized

Check out this informative article on creating a dynamic dialog box using PrimeNG here Take a look at the image below to see how the dialog box appears when opened: https://i.sstatic.net/nUq1d.png One issue I am facing is that the grid header gets hidd ...

htmlcssangulardialogprimeng

Enhance the appearance of the web page in your Windows Phone by incorporating CSS into the WebBrowser

Is it feasible to include a "position:fixed" style to the <header> in the app that showcases website pages using a WebBrowser control? This adjustment can be made via inline styling or by utilizing an external stylesheet saved within the resources ...

csswindows-phone-8browserwindows-phone