使用z-index将元素放置在div下 [英] Position an element under a div by using z-index

问题描述

我试图把一个将在其父母和其他元素之下的子div。

  .box1 {background-color：blue;宽度：500px; height：100px;位置：相对; z-index：3;}。box2 {position：absolute;背景颜色：红色;宽度：200px; height：100px;左：30％; top：20px; z-index：2;}。box3 {background-color：yellow;宽度：500px; height：100px; z-index：1;}  

< div class = BOX1 > < div class =box2>< / div>< / div>< div class =box3>< / div>

我想将红色矩形置于蓝色和黄色之下。我把z-index放在其中三个。但是，它不起作用。

您对此有何看法？感谢！

更新 ：尽管这些框的排列顺序正确，但是这些框内的元素不能现在点击。

你可以看看这里的错误： https://jsfiddle.net/p1xd6zah/

解决方案

您可以做一个 hack 与 z-index ：

1. code> z-index：-1 到 box2 。 （在父母下面放置子女）




2. 添加 z-index ：-2 和 position：relative to box3 （now this this this behind $ b

删除 z-index from box1 - 请参阅下面的演示：



  .box1 {background-color：blue;宽度：500px; height：100px; position：relative;}。box2 {position：absolute;背景颜色：红色;宽度：200px; height：100px;左：30％; top：20px; z-index：-1;}。box3 {background-color：yellow;宽度：500px; height：100px; z-index：-2; position：relative;}  

 < div class =box1 > < div class =box2>< / div>< / div>< div class =box3>< / div>  




I tried to put a child div that will come under its parent and over the other elements.

.box1{
  background-color: blue;
  width: 500px;
  height: 100px;
  position: relative;
  z-index: 3;
}

.box2{
  position: absolute;
  background-color: red;
  width: 200px;
  height: 100px;
  left: 30%;
  top: 20px;
  z-index: 2;
}

.box3{
  background-color: yellow;
  width: 500px;
  height: 100px;
  z-index: 1;
}

<div class="box1">
  <div class="box2"></div>
</div>
<div class="box3"></div>

I want to position the red rectangle to be under the blue and over the yellow. I put the z-index on three of them. However, it doesn't work.

What do you think about this? Thanks!

Update: Although the boxes are in the right order, however, the elements inside those boxes cannot be clicked now.

You can take a look at the error here: https://jsfiddle.net/p1xd6zah/

解决方案

You can do a hack with z-index:

1. You can add z-index: -1 to box2. (stacks the child below the parent)

2. Add z-index: -2 and position: relative to box3 (now stack this behind box2)

Remove the z-index from box1 - see demo below:

.box1 {
  background-color: blue;
  width: 500px;
  height: 100px;
  position: relative;
}

.box2 {
  position: absolute;
  background-color: red;
  width: 200px;
  height: 100px;
  left: 30%;
  top: 20px;
  z-index: -1;
}

.box3 {
  background-color: yellow;
  width: 500px;
  height: 100px;
  z-index: -2;
  position: relative;
}

<div class="box1">
  <div class="box2"></div>
</div>
<div class="box3"></div>

这篇关于使用z-index将元素放置在div下的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！