Despite being positioned absolutely, they are able to make z-index work effectively

Currently, I am facing an issue with two elements in my design. The first element consists of dotted circles that should have a z-index of -999 so they remain in the background entirely. The second element is a login form that needs to have a z-index of 999 to appear on top. However, despite both elements being positioned absolutely, the z-index doesn't seem to be taking effect. I attempted to consolidate the files by combining the circles.html and login.html in Flask, but the problem still persists.

To visualize the problem, refer to this image:

The CSS for Login:

.login-div{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.2);
    z-index: 999 !important;
}

Circles CSS: .circles in the div containing the image of circles.

.circles{
    position: absolute;
    top: 0%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -999 !important;
}

Only these two divs have z-index values assigned, so it seems unlikely to be a stacking order issue. Your insights on this matter are greatly appreciated.

htmlcssz-index

Answer №1

Confirm if this aligns with your requirements

Solution 1:

.circles{
    position: absolute;
    top: 0%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
}

.login-div {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    background: white;
    transform: translate(-50%, -50%);
    box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.2);
}
<div class="login-div">
  <h1>Log In</h1>
</div>
<div class="circles">
  <img src="https://glowvarietyshow.com/wp-content/uploads/2017/03/placeholder-image.jpg" alt="Image Test">
</div>

this z-index: -1; positions the element behind other elements.

Solution 2:

.background--page {
    width: 100vw;
    height: 100vh;
    background-position: center;
}

.login-div {
    background: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.2);
    width: 200px;
    height: 200px;
}
<div class="background--page" style="background-image: url('https://glowvarietyshow.com/wp-content/uploads/2017/03/placeholder-image.jpg')">
  <div class="login-div">
    <h1>Log In</h1>
  </div>
</div>

By using background-image, there is no need to adjust the z-index.

Answer №2

After changing the background color to white, the issue was resolved, indicating that it was not related to the z-index.

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 reason behind both paragraphs being displayed in a shade of blue in this snippet of code

.red p { color: red; } .blue p { color: blue; } <div class="blue"> <p> first </p> <div class="red"> <p> second </p> </div> </div> Initially, I expected the first paragraph to be bl ...

htmlcss

Create a Bootstrap layout with three columns and three rows, where the third column has a height

I am trying to achieve a specific layout using the col-lg-4 class. My main goal is to make the third column span across all three rows without creating excessive white space between them. The current layout looks like this: Is it possible to do this in B ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Tips for aligning a menu that expands from the side to the center

I'm trying to center the menu on my webpage, but the issue is that it's stretching from the sides. Here's a sample image of the menu layout: I'm struggling to figure out how to fill the empty space on the left side of the menu. ...

htmlcss

Table Header Stays Put Without Shrinking or Expanding with Window Adjustment

I have a sticky table header that stays at the top when scrolling down on my web page. To achieve this effect, I followed the solution provided on css-tricks.com/persistent-headers/. However, I encountered an issue where the sticky table header does not ...

javascriptjqueryhtmlcss

Step-by-step guide to achieving a File div effect using CSS

Wondering how to achieve this specific effect within a div using CSS? click here for visual reference I attempted it using the before and after elements, but I struggle with these tags: check out this image for details Apologies if my question is unclear ...

css

What is the best way to make my button sticky across different screen sizes on my webpage?

I'm having trouble figuring out how to make my purple button sticky and responsive on the right side of the screen as I scroll down. Can someone help me with this? This is the snippet of my HTML code: <Col className="colPre"> ...

htmlcssreactjs

Explanation for aligning anchors within an HTML <div>

I'm faced with this HTML snippet: <div class="row"> <div class="col-md-10 social-icons"> <a href="https://www.youtube.com/" target="_blank"><img src="/images/youtube-i.png"></a> <a href="https://gi ...

htmlcss

What is the most effective method for coding an input tag with specific restricted characters?

Introduction I have a unique idea for creating an input field of fixed length where users can fill in the gaps without modifying certain pre-filled characters. For example, I want to display "__llo w_rld!" and let users complete the missing characters. In ...

javascripthtml

Unable to trigger jQuery onclick event on nested div elements

I'm experiencing an issue with my web-page where two buttons at the top are not responding to a sorting function on the nested #byFilter. Despite trying to apply the onclick(function()) method, it doesn't seem to work. Javascript $(document).re ...

javascriptjqueryhtmlcss

I am encountering an issue with the jquery.min.js file not loading when I try to utilize the Google CDN for jQuery

Currently in the process of learning about jQuery and testing its functionality, however, I am facing an issue where changes are not being reflected. The error message states that it is unable to load. I have confirmed that I am using Google CDN and also h ...

htmljquerycssvisual-web-developer

Setting up Jplayer as an audio player: A step-by-step guide

I am looking to incorporate a Jplayer audio player into my project, but I am struggling to find any documentation or resources that provide instructions on what components to include and how to set it up. If anyone has experience with using the Jplayer au ...

javascriptjqueryhtmlhtml5-audiojplayer

When the mouse leaves the area, I would like the iframe within the div to be refreshed

When you hover over the button on the right, a slide panel appears with an iframe. Each time this page loads, it has a different background. I want a new background to load every time there is a new hover, requiring a refresh of the div. How can I achieve ...

jqueryhtmlcssiframe

The HTML checkbox appears disproportionately large on the user's screen when using Firefox and Chrome, but not when using Internet Explorer

There seems to be a strange issue that I've come across. One of our QA tester's computers is displaying an HTML checkbox in a very large size when using Firefox and Chrome, but it appears normal in size when viewed in IE. Meanwhile, on my comput ...

htmlcsscheckboxcross-browser

Tips for controlling image sizes on larger devices while maintaining the appearance on Retina displays

I've been searching on the internet, but I got lost in complex explanations. I thought maybe someone here could help me out. :) I have a website with both mobile and desktop versions. Most of it looks good on different devices but there are some elem ...

cssmedia-queriesretina-display

Set border-image to have rounded corners

I am attempting to create a circular button with a unique border effect. Here is the code I have implemented so far: body { display: flex; height: 100vh; overflow: hidden; justify-content: center; align-items: center; } button { height: 80px ...

htmlcsssvg

Turn off the ability to view the content of .css and .js files within the browser

Earlier, I inquired about how to disable file and folder listing and discovered that it can be achieved using a file named .htaccess. To disable folder listing, I entered Options -Indexes in the .htaccess file located in the parent folder. Additionally, to ...

javascriptcss.htaccess

Show the user's username on their profile page by retrieving the name from the database

Upon successful login/signup with various services, I want to display the username on the profile page. However, my database stores user data in different fields depending on the service used - user.twitter.name for Twitter logins, user.google.name for Goo ...

javascriptnode.jshtmlexpress

designing a responsive form in the mobile environment

I have implemented a search form on my website with a button inside the text box. It works fine on desktop, but when I switch to mobile view, the positioning is off. I am currently using absolute positioning for the button to give it a fixed position. Is t ...

htmlcsstwitter-bootstrap

I'm puzzled by why my newly purchased website domain occasionally redirects me to the outdated webpage

My website was previously hosted with n*agahoster but we decided to switch to a government server and change the domain from example.com to example.gov.xx. The transition was smooth, as someone managed the server and I provided backup files (public_html an ...

phphtmlwebserverhosting

What is the process for obtaining WOFF files from Google Fonts?

It appears that Google Fonts primarily provides fonts in WOFF2 format. Although this may be compatible with Chrome, WOFF2 is not widely supported by other browsers Is there a method to link directly to Google fonts stored on their CDN using a different f ...

cssfontscross-browsergoogle-font-api