Display the child div above elements on the parent div level by utilizing the z-index property

Is it possible to showcase a child div (located within a parent container) above another div at the same level of the parent div using z-index manipulation with jQuery and CSS? In this scenario, despite assigning a z-index of 1000 to the Calendar and 2 to gridRight, the Calendar still does not display above gridRight. The user should have the ability to drag the Calendar. How can this be achieved so that the Calendar appears above gridRight?

-Both elements are set to position: absolute

Check out the simple JSFiddle http://jsfiddle.net/LTRyd/1/

  • The goal is to move the red square on top of the green square while keeping the black square underneath the green one.

    <div id="mainContainer" class="mainContainer">
     <div id="grid1" class="grid"> <!--Z-Index of 1-->
          <div id="Calendar" class="item"></div> <!--Z-Index of 1000-->
</div>            
</div>
<div id="gridLeft" class="gridLeft"></div> <!--Z-Index of 2-->
<div id="gridRight" class="gridRight"></div> <!--Z-Index of 2-->
javascriptjquerycsshtml

Answer №1

When it comes to z-index, it is important to note that it only has an effect on elements that have been positioned.

To ensure that your z-index works properly, you need to adjust your CSS to position the elements accordingly:

#Calendar
{
  position: relative;
  z-index: 20;
}

#grid2
{
  position: relative;
  z-index: 10;
}

edit:

"In a stacking context, child elements are stacked based on specific rules. The z-index values of child elements within their stacking contexts only hold significance within the parent element. Stacking contexts are treated as a single unit in the parent stacking context."

Expand your understanding of stacking context - MDN

Essentially, stacking occurs within the parent element, and then this parent's stacking order is considered relative to its other siblings, regardless of how the children are stacked within it.

Therefore, although Calendar may have a z-index of 1000, this z-index will only affect how it is stacked against other children of grid1.

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

Traversing an array and connecting each element to a separate array in AngularJS

In my programming task, I am working with an object and an array that are defined as follows: $scope.multipleTransferGotten = []; $scope.newParameters = { UserId: "", Udid:"", TransType: "", SourceAccNumber: "" ...

javascriptarraysangularjsfor-loop

Utilizing Horizontal Navigation to Showcase Content (JavaScript)

I'm using the Flickity CSS library to create a horizontal scrolling navigation bar. I've customized the carousel template so that when a cell is selected, it snaps to the center of the bar. The carousel has 5 cells named 'slide 1', &apo ...

javascriptjqueryhtmlcssflickity

Capture the incoming path and direct it back after the user logs in

I'm currently facing a challenge with my app that has a login feature and a dashboard with threads. Each thread has its own unique URL address. The issue arises when I want to share the thread URL with someone who is not logged in, as they would need ...

javascriptreactjsreact-router

When working with Angular, the onSubmit method may sometimes encounter an error stating "get(...).value.split is not a function" specifically when dealing with Form

When the onSubmit method is called in edit, there is an error that says "get(...).value.split is not a function" in Form. // Code for Form's onSubmit() method onSubmitRecipe(f: FormGroup) { // Convert string of ingredients to string[] by ', ...

htmlangularformssplit

Encountering an unhandled runtime error while importing the Client component into the server component: The JSON format is invalid, with the error message stating "undefined"

I've been attempting to create a basic counter component that increments the count of a state variable when a button is clicked. To achieve this, I created a separate file named Counter.tsx and placed it in the components folder at the root of my next ...

javascriptreactjsnext.js

Issue when attempting to update the state using the spread operator

I'm currently developing a react application and I've encountered an issue. My goal is to update the state object within my reducer using parameters supplied by the action creator. To simplify, I've created an example in pure JS Here is how ...

javascript

React - issue with modal due to invariant violation

In my application, I have implemented a modal with a dropdown menu containing various Categories. Upon selecting a Category, a new dropdown menu appears which displays Classifications. If a Classification is selected, another component is rendered on the p ...

javascripthtmlreactjs

It appears that the pages are not able to access my CSS file

I am a beginner and recently developed a Twitter Bootstrap page for an MVC4 application. Starting with the layout: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> < ...

csstwitter-bootstrap

What is the best way to position my logo on top of the stunning space background?

Click here to check out the code on CodePen Please take a look at my code on codepen.io. I am new to Stack Overflow so please be patient with me if I make any mistakes. ;-; I currently have my logo (https://i.stack.imgur.com/W0nWc.png) included in the co ...

javascripthtmlcsslayer

What is the best way to pass a module from the controller to a Jade/Pug template and then use it as an argument in an event handler within the template?

I passed the module 'naija' to a template from the controller in this way: res.render('testing', {title:"filter setting page", nigeria:naija }); The func ...

javascriptnode.jsexpresspug

The webpage fails to return to its original position after the script has been executed

My website has a sticky div that stays at the top when scrolling down, but does not return to its original position when scrolling back up. Check out this example function fixDiv() { var $div = $("#navwrap"); if ($(window).scrollTop() > $div.data("top ...

javascriptjquerycss

Modifying the structure of serialized data

After serializing a JS form, the data looks like this: .....&xx=xxx&otherError=&input=SMS&message=sdfgs&...... Can anyone provide guidance on how to replace the value of message with the content of a textarea before making an ajax cal ...

javascriptjqueryhtmlforms

The bootstrap select dropdown seems to have a mind of its own and doesn't want to

While using the bootstrap-select picker to select an option, I encountered an issue where the drop-down structure with the top bar does not properly follow the parent element when the container is scrolled. If you want to see the issue in action, please c ...

jqueryhtmlcssbootstrap-selectpicker

PHP search function malfunctioning

I'm feeling quite confused about the current situation. I am utilizing a form that requires a student code input of "lz." <form action="classgrades.php?id=<?php echo $courseid ?>" method="post"> <input type="text" name="studen ...

phpmysqlsqlhtml

Having difficulty retrieving the JSON response

var apiurl="https://raw.github.com/currencybot/open-exchange-rates/master/latest.json"; $.ajax( { url:apiurl, type:"POST", dataType:"JSONP", success:function(data) { console.log(data); } }); Attempti ...

jqueryajaxjsonjsonp

Exploring the loading of stateful data in ReactJS and implementing optimizations

Exploring the world of ReactJS in conjunction with Django Rest Framework (DRF) def MyModel(model): ... status = ChoiceField(['new', 'in progress', 'completed'...]) In my application, I have dedicated sections for eac ...

javascriptpythondjangoreactjsdjango-rest-framework

When you click on the submit button, it triggers the associated event

I have multiple text input fields where pressing the enter key should move focus to the next field. After reaching the last text input, I want the focus to be on the submit button without triggering its click event until the user presses enter again. The c ...

javascriptjqueryfocus

Axio GET request in VueJS does not return a response body when using Amazon API Gateway

UPDATE: While Postman and browsers are able to receive valid response bodies from an Amazon API Gateway endpoint, other web applications are not. This is a basic GET request with no headers, and no authentication is needed for the API endpoint. The data is ...

javascriptvue.jsaxiosamazon-gateway

Guide to loading an image and incorporating it into a canvas using Gatsby's server-side rendering

I encountered an issue where I was unable to create an image using any of the supported types like CSSImageValue, HTMLImageElement, SVGImageElement, HTMLVideoElement, HTMLCanvasElement, ImageBitmap, or OffscreenCanvas in my SSR application with Gatsby. De ...

javascriptreactjscanvasgatsby

Ways to combine multiple CSS styles for an element using .css()

I'm struggling to apply styles to a deeply nested element using jQuery and JavaScript. I understand how to style nested elements, but I'm having trouble targeting a specific deeply nested element. My website is built on WordPress, and it has ins ...

jqueryhtmlcss