Using HTML and CSS to stack a DIV on top of another using z-index

I have 3 main layers on my website:

1) The main view with elements inside (#views in jsbin) - BOTTOM LAYER
2) An overlay (with a white background opacity of .8 #overlay in jsbin) - MIDDLE LAYER
3) A context menu (#contextmenu in jsbin) - TOP LAYER

When I display the context menu, the 3 layers are shown correctly -> the main view is "hidden" by the transparent overlay and the context menu appears on top.

My issue arises when I try to pop out an element within the main view. I want to show this element (#card1 in jsbin) between the context menu and the overlay...but I haven't been successful so far. Is it possible?

Here is the link to my jsbin: http://jsbin.com/gaxadaci/7/edit

Thank you for your assistance. Best regards, Bastien

javascripthtmlcssz-index

Answer №1

Make sure to include position:relative in the card's CSS styling; remember that z-index does not affect elements with a position of static.

Keep in mind that if any ancestor of the "element to pop out" has a specified z-index, this technique will not be effective (and there won't be a way to achieve the desired effect) because the ancestor establishes the stacking order for its descendants.

Answer №2

To make your card div work properly, just include the CSS property "position: relative"

#myCard {
        z-index: 3;
        position: relative;
    }

Check out the demo on JSFiddle http://jsfiddle.net/abc123/8/

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

When working with an outdated package, you may encounter a situation where babelHelpers is not

My current focus is on a vuetify v1.5 project. Unfortunately, one of the dependency packages (d3-flextree) is causing an issue with the 'babelHelpers is not defined' error. The solution I came across suggests using transform-runtime instead of th ...

javascriptvue.jsd3.jswebpackbabeljs

Problem with the transform attribute in CSS

Having trouble rotating a div within another div. I tried using the transform property but it's not working as expected. I heard about another method which involves using :before pseudo-element, but I'm not sure what's wrong with that either ...

htmlcss

Extract image file name and date information (day, month, year) from an HTML form using Angular

The content of the register.component.ts file can be found below: import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-register', templateUrl: './register.component.html', styleUrls: [&apo ...

javascripthtmlangular

Setting up a software from a GitHub source

My issue arises when attempting to install a particular package of mine with the version specified as a specific git branch. The problem occurs because the repository does not contain the dist folder, which is required by my npm package. Here is the metho ...

javascriptnode.jsnpm

I am having trouble getting the color, metalness, lights, and shaders to work properly in Three JS on my

I attempted to create a simple code using Three.js for a red colored torus with a point light and a textured surface, but unfortunately, all I achieved was a black torus that rotates. It seems like the elements in this code are not functioning as expecte ...

javascripthtmlnode.jsthree.jswebgl

Issue with Arabic characters displaying incorrectly in Outlook 2007

I have encountered an issue with my newsletter application where the newsletters are in Arabic. When viewed in the browser, everything looks fine. However, when opened in Outlook 2007, strange text appears instead. Interestingly, if the email is marked as ...

htmlcssemailoutlook

Once I have verified the user's credentials through a POST request, I will proceed to make a GET request

I am in the process of constructing a dashboard that automates logging into an API and updating specific data elements. I have successfully managed to login and authenticate, but I am unsure how to proceed with chaining the GET request after the POST actio ...

javascriptajaxapixmlhttprequest

PhP submit triggers fatal error

I am currently developing a form to add records to a database directly from the browser. However, upon submitting the form, I encountered the following error: Fatal error: Call to a member function execute() on boolean in /srv/http/career.php on line 56 ...

phphtmlmysql

Saving information to a hidden div using jStorage

Currently, I am utilizing jStorage for storing data in local storage. When I store the data using console.log() and later retrieve it using $.jStorage.get(), I found that the values are not being assigned to the hidden div. Can someone provide guidance o ...

javascriptjqueryajaxhtml

What is the best way to adjust a div's size according to the device's screen dimensions?

I'm in the process of developing a web app that will be used on iOS devices, specifically targeting both iPhone 4 and iPhone 5. During my development phase using an iPhone 5 device, everything seemed to fit perfectly and work seamlessly. However, when ...

htmlcss

The JSON object was not found in the AJAX response

I received a JSON object through an AJAX request. When I use console.log(response); in the console, I can see my object. However, when I use console.log(response.mostSearched);, it returns undefined. Why is that? I copied the object from the devTools con ...

javascriptajaxjson

extract the information from a specific div on a different website using JavaScript

My goal is to load a specific div with a class="container" from a website and extract its content into my application. Upon making an ajax call to retrieve the site's data, I encountered a cross-domain origin error since I don't have access to t ...

javascriptjqueryajaxyql

Is there a way to automatically remove a document in MongoDB and Node.js once its expiration date has passed?

I'm working on an appointment booking app and I need to automatically delete booking details after the booked date has passed. How can I make this happen? I attempted to use node-scheduler for this task, but it wasn't successful. The app itself ...

javascriptnode.jsmongodb

Setting column heights and spacing in Bootstrap

I'm looking to dynamically populate the blocks. Essentially, a for loop would be used to pass the data. However, I'm facing some challenges with the height of the blocks at different screen sizes while utilizing bootstrap 4. My goal is to have th ...

htmlcssbootstrap-4

Ways to display the hidden element using AngularJS

I want to show the information of "[6] Peter who is 95 years old" in a hidden text box, which should only appear when the button <button ng-click="show_id(friend.id)">get my id</button> is clicked. The name should be displayed using the ng-mode ...

javascriptangularjs

Obtaining the response object for the web browser

Greetings! I currently have a function within router.js in NODEJS : const authenticateUser = (req, res, next) => { //something }; Whenever my application is live, this function is triggered. I am looking for a way to examine the response object. Is ...

javascriptnode.jsexpress

Different CSS values can be applied for specific versions of Internet Explorer by using conditional comments

I am dealing with a CSS class named "myclass" that requires a z-index of 5 specifically for IE8. I have attempted to achieve this using the following methods: .myclass{ z-index: 5\9; } ---> Interestingly, this method applies from IE10 onwards a ...

htmlcssinternet-explorer

Struggling with aligning mat-icon in the center using HTML and CSS?

My issue is that the mat-icon in my generated columns is not center aligned. What could be causing this? When using ngFor to generate my datatable columns dynamically, none of them align correctly. The mat-icon inside my DIV defaults to left alignment. ...

htmlcssangularngx-bootstrapngx-datatable

What advantages do CSS pre-processors (SASS, SCSS, LESS) bring to the table for creating Responsive Web Designs?

Currently, I am embarking on a Responsive Web Design (RWD) project and contemplating whether integrating LESS would streamline the process. Are there practical benefits to utilizing CSS preprocessors for RWD projects? I suspect that employing media qu ...

cssresponsive-designless

My child template in Angular UI is not loading properly due to the presence of multiple views when the URL changes

After reviewing a couple of questions similar to this on various forums, I may have overlooked a crucial detail in them. Upon loading http://localhost:8000/characters/#/mages/detail/3, I am being redirected to my 'otherwise' URL: $urlRouterProvi ...

javascriptangularjsangular-ui-router