css problem with stacking order of child elements

Question

css problem with stacking order of child elements

Trying to arrange 3 HTML elements on the z-plane:

.bank {
  width: 200px;
  height: 200px;
  background-color: grey;
  position: absolute;
  
  z-index: 100;
  
  transform: translateY(10%);
}

.card {
  width: 100px;
  height: 100px;
  background-color: red;
  
  position: absolute;
  left: 50px;
  top: 50px;
  
  z-index: 300;
}

.button {
  width: 50px;
  height: 50px;
  background-color: green;
  
  position: absolute;
  left: 30px;
  top: 50px;
  
  z-index: 200;
}

<div class="bank">
       bank
       <div class="card">card</div>
    </div>
    
    <div class="button">button</div>

Trouble getting the button behind the card while above the bank.

Edit: Found a workaround by removing z-index and transform from '.bank', but need the transform property. Any suggestions?

What could be causing the issue? Thanks

css z-index

Answer 1

Answer №1

To avoid creating a new stacking context, do not assign any z-index to .bank. Instead, adjust the z-index of the other elements. Since all 3 elements belong to the same stacking context, you have the flexibility to specify the order as needed.

.bank {
  position:relative;
  background: red;
  width: 500px;
  height: 200px;
}

.card {
  position: absolute;
  top:0;
  z-index: 2;
  height: 100px;
  width: 400px;
  background: blue;
}

.button {
  position: absolute;
  top: 0;
  z-index: 1;
  height: 150px;
  width: 450px;
  background: yellow;
}

.container {
  position: relative;
}

<div class="container">
  <div class="bank">
    <div class="card"></div>
  </div>

  <div class="button"></div>
</div>

UPDATE

If you want your elements to belong to the same stacking context, remove the z-index and transform from .bank. If not done, it will be impossible for the elements to share the same stacking context. Each stacking context is self-contained, with the whole element considered in the parent stacking order after stack ordering the content.

Each stacking context is self-contained: after the element's contents are stacked, the whole element is considered in the stacking order of the parent stacking context.

For more information visit: Why can't an element with a z-index value cover its child?

Answer 2

To avoid creating a new stacking context, do not assign any z-index to .bank. Instead, adjust the z-index of the other elements. Since all 3 elements belong to the same stacking context, you have the flexibility to specify the order as needed.

.bank {
  position:relative;
  background: red;
  width: 500px;
  height: 200px;
}

.card {
  position: absolute;
  top:0;
  z-index: 2;
  height: 100px;
  width: 400px;
  background: blue;
}

.button {
  position: absolute;
  top: 0;
  z-index: 1;
  height: 150px;
  width: 450px;
  background: yellow;
}

.container {
  position: relative;
}

<div class="container">
  <div class="bank">
    <div class="card"></div>
  </div>

  <div class="button"></div>
</div>

UPDATE

If you want your elements to belong to the same stacking context, remove the z-index and transform from .bank. If not done, it will be impossible for the elements to share the same stacking context. Each stacking context is self-contained, with the whole element considered in the parent stacking order after stack ordering the content.

Each stacking context is self-contained: after the element's contents are stacked, the whole element is considered in the stacking order of the parent stacking context.

For more information visit: Why can't an element with a z-index value cover its child?

Answer 3

Answer №2

To achieve this effect, apply z-index exclusively to the card class and position the elements absolutely.

.bank {
  width: 150px;
  background: red;
  height: 150px;
  position: absolute;
  top: 0;
  left: 0;
}

.card {
  width: 50px;
  background: black;
  height: 50px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.button {
  width: 100px;
  background: blue;
  height: 100px;
  position: absolute;
  top: 0;
  left: 0;
}

<div class="bank">
   <div class="card"></div>
</div>

<div class="button"></div>

Answer 4

To achieve this effect, apply z-index exclusively to the card class and position the elements absolutely.

.bank {
  width: 150px;
  background: red;
  height: 150px;
  position: absolute;
  top: 0;
  left: 0;
}

.card {
  width: 50px;
  background: black;
  height: 50px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.button {
  width: 100px;
  background: blue;
  height: 100px;
  position: absolute;
  top: 0;
  left: 0;
}

<div class="bank">
   <div class="card"></div>
</div>

<div class="button"></div>

css problem with stacking order of child elements

Answer №1

Answer №2

Similar questions

What is the best way to center the startIcon material ui icon?

I'm feeling pretty lost when it comes to understanding how line-height and margins work together

Truncate a string in Kendo Grid without any white spaces

Prevent zooming or controlling the lens in UIWebview while still allowing user selection

Troubleshooting: Django update causing issues with CSS background image display

The fixed div width suddenly switches to 100% without warning

Obtaining the XPath for a data table containing two td elements that can be simultaneously clickable

Image Positioned Outside Border in HTML

Counting the number of visible 'li' elements on a search list: A guide

Choosing CSS/JS selector: Pick the final element with a class that does not match

Is it possible to slide-toggle and alter the background color of a div when clicked?

How can I horizontally center an element in CSS/HTML if auto-margin does not produce the desired result?

Utilizing fab-icons with CDN in Next.js version 13.4

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

The design breaks occur exclusively in the Android default browser

Personalized animated Reactflow Connection Lines

Adjust the text to fit neatly within a circular-shaped column container

How can you alter the background color of a Material UI select component when it is selected?

The intricate procedure behind applying a blur effect using CSS3 filters

How can you gradually fade out the bottom edge of a rendered component until it is re-rendered?