Various degree of stacking priority ordering

I was faced with a coding dilemma that I couldn't quite figure out. The title may not give much away, but the issue lies within this code snippet:

https://jsfiddle.net/bnh3487n/

div {
width: 100%;
}

#wrapper {
    width: 500px;
    height: 500px;
    position: relative;
}

#one {
    height: 200px;
    background-color: red;
    position: absolute;
    z-index: -1;
}

#sub {
    height: 50px;
    background-color: green;
    position: absolute;
    z-index: 3;
}

#two {
    height: 200px;
    width: 300px;
    background-color: blue;
    margin: 0px auto;
}

I'm trying to find a way for the green div to be in front of the blue one while remaining a child element of the red div. So far, setting the z-index to 3 hasn't been effective, and I'm struggling to come up with a solution;

Answer №1

It is not possible because the z-index property only functions when the two elements are siblings, rather than being a parent-child relationship.

In essence, #two is prioritized over the entire container of #one:

 0   #two

-1   #one

Since #one encompasses #sub within itself and falls behind #two, logically, #sub will also be positioned behind #two.

Consider visualizing the z-index concept in this manner:

              -1                              0

     /--------------------/         /--------------------/
    /                    /|        /                    /|
   /      #one          / |       /      #two          / |
  /                    /  |      /                    /  |
 /-2  -1  0  1  2  3--/   |     /-2  -1  0  1  2  3--/   |      Observer (o ͜L o )
 |                    |   |     |                    |   |
 |               #sub |   |     |                    |   |
 |                    |   /     |                    |   /
 |                    |  /      |                    |  /
 |                    | /       |                    | /
 |--------------------|/        |--------------------|/

Answer №2

When dealing with HTML/CSS, the answer to whether z-index is simple - it's a resounding "no".

The use of z-index comes with certain rules:

  • You must specify a position along with z-index
  • If a parent element has a z-index set, a child element cannot display above it. For example, if a parent has a z-index of 2 and a child div has a z-index of 3, the child will not display above the parent unless negative values are used.

To address this issue, consider changing the structure of your HTML so that the divs are siblings rather than nested.

Answer №3

For a thorough understanding of how the z-index functions, check out this valuable resource. Essentially, the z-index impacts all descendant elements.

To resolve the issue, simply eliminate the "sub" div and reposition it outside of "one".

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

Can a link be stored in a table using PHP?

I need assistance in organizing a page with a sidebar containing about 20 links as the code appears messy. Is there a way to store all <a href=.... in a table, an array, or another method for better organization? If anyone could provide an example, it ...

Various conditional statements based on the dropdown menu choice

I currently have a basic dropdown menu on my webpage that enables users to switch between viewing Actual or Planned dates/times in a table (I am utilizing the controller as syntax): <select ng-model="trip.viewType"> <option value="actual"> ...

What is the best way to place <a> links next to each other in the header?

Looking to align the links horizontally in the header using CSS, can someone assist me with this? <body> <nav> <div class="wrapper"> <a href="index.php"><img src="spaceship.png" alt="blogs logo& ...

Automatically transfer images to a designated folder using PHP

I am just starting out in web development. I have a vision of creating a webpage with a photo gallery. Below is the initial code snippet: <body> <div class="container"> <header class="clearfix"> </header> ...

Which particular files should be included such as CSS and JavaScript?

After downloading bootstrap4, I'm unsure which css, js, or other files are necessary to include in order to make my form Bootstrap ready. My current task involves creating a form in CakePHP 3. Click here for more information on how to create a form ...

Having trouble accessing the templateUrl for HTML in Angular version 1.6

I am currently working on a basic Angular 1.6 web application. Although I have created a state for the URL "/", it seems that Angular is unable to locate the file for some reason. The folder structure looks like this: https://i.stack.imgur.com/2p6bP.png ...

Upload several files sequentially in a form on a website using Selenium with Python

I need to automate the process of inputting multiple files from a folder into a website and running an online job for each file. Currently, I can only input one file at a time using this code snippet. from selenium import webdriver url = "http://www.exam ...

Is JQueries Live functionality compatible with IE8?

Incorporating the JQuery fancy box, I have implemented a pop-up form with select fields that dynamically update a span element upon selection change. Although it works well thanks to fellow Stack Overflow users' help, it unfortunately does not functio ...

I'm having trouble with my tablet view taking priority over my desktop view - what could be causing this issue?

Styling for different screen sizes: @media (min-width: 991px) and (max-width:768px){} .container, .container1, .container2 .container3{ float: left; } .container1{ width: 50%; } .container2{ width: 50%; } .container3{ width: 100%; } /**** ...

"Yakov's slender typefaces are appearing incorrectly on the screen

I recently tried to incorporate Yakov thin fonts using CSS @font-face, but I noticed that the fonts appear quite different from the original ones. Any idea why this might be happening? Below is the code snippet I used: @font-face { font-family:' ...

Incorporating Bootstrap's Inline Design Elements

I am having trouble aligning a series of elements horizontally using bootstrap as shown in the example image below: Whenever I add the "form-control" class to the input element, it gets pushed down below the other elements. I have experimented with differ ...

JavaScript: table is not defined

When creating a table using Django models and JavaScript, I encountered an issue where the cells values of the table could not be accessed from another JavaScript function. The error message indicated that the table was "undefined". Below is the HTML code ...

Automatically synchronize dynatable with AJAX requests and JSON responses

I'm currently facing a bit of confusion as my code appears to be functioning properly, but the table is not updating as expected. xD I am fetching data from my database and loading it into a table, aiming for it to automatically update every three se ...

Is there a way to access data from a database using ajax and php?

I am attempting to verify if a field exists in the database before submitting a form. To achieve this, I have added the keyup event to the field to fetch data from the db using ajax. Below is the code snippet that I have added where the form is: $(docum ...

Is there a file outside of the website's root that needs to be linked?

Hey there, I could use some assistance with a little issue I am having: Running the latest release of Ubuntu server 64bit with 2 virtual websites Here is my folder structure: site1 (Accessible on the web) /var/www/site1 site2 (Intranet site) /var/www ...

Is there a way to display .form-check-inline buttons on a different line than their corresponding label?

I'm trying to create a form with radio buttons and using Bootstrap 4 to align them horizontally with the .form-check-inline class. However, this causes the input labels to be on the same line as the buttons: <html> <head> <link ...

Unable to load CSS styles from SCSS when rendering the view

I am having trouble loading styles on my webpage from SCSS. Below is the code from my Gulp.js file: // Compile and Automatically Prefix Stylesheets gulp.task('styles', function () { return gulp.src([ 'Content/styles/**/*.scss&apo ...

Display a variety of body background images depending on the user's selection

Is it possible to change the background of the page when an option is selected from a dropdown menu? Additionally, can this be achieved with a smooth fade in and fade out animation? Here is a code example on CodePen. body ...

When I attempt to run JavaScript code on the server, it fails to execute properly

When I run my code on my PC without putting it on the server, it works perfectly fine. However, when I upload it to the server and try to call it, I encounter the following error: Uncaught ReferenceError: crearLienzo is not defined at onload ((index): ...

Update the button text dynamically when clicked without using an identifier or a class

If we take a look at my button in the following code: <input type="button" value="BLUE" name="button_blue" /> My goal is to have the value="BLUE" changed to value="RED" or any other desired value when the button is clicked. ...