Question

这是一个非常简单的问题代码。

1）是否有另一种方法可以使嵌套的“内部”div位于“底部”div的顶部，我能做到的唯一方法是给'内部div一个z-index整数值。

示例适用于z-index:90;但不适用z-index: auto;

我无法改变'外部'和'底部'div的html / css。

2）这个问题是因为呈现html的顺序吗？

.outer {
  background: red;
  width: 200px;
  height: 100px;
  position: relative;
  z-index: auto;
}
.inner {
  background: yellow;
  width: 50px;
  height: 50px;
  position: absolute;
  left: 0;
  top: 90px;
  z-index: 90;
  /* z-index: auto; why is it not working?*/
}
.bottom {
  background: blue;
  width: 200px;
  height: 100px;
  position: relative;
}

<div class="outer">
  <div class="inner">testing testing</div>
</div>
<div class="bottom"></div>

Answer 1

这种情况正在发生，因为auto为其提供了z-index的父级。 DOM中较低的元素放置在它们上方的元素上。

MDN Docs

该框未建立新的本地堆叠上下文。当前堆叠上下文中生成的框的堆栈级别与其父框的相同。

例如：

＆＃13;

div{
  height:100px;
  position:relative;
}
div:after{
  position:absolute;
  content:"Test";
  top:100%;
  }
.upper{
  background:red;
  }
.lower{
  background:blue;
  }

＆＃13;

<div class="upper"></div>
<div class="lower"></div>

＆＃13;

＆＃13; 如您所见，.upper在.lower下呈现，因此隐藏了.upper中的文字。

Answer 2

通过使用z-index: auto;，您可以为元素提供父级的z索引（如果父级未设置值，则为0）。如果在DOM中的第一个元素之后具有非静态位置的元素（也使用z-index：0），则第二个元素优先于第一个元素。如果浏览器具有相同的z-index，则浏览器始终显示最后一个元素。

您可以定义正或负z-index来改变默认行为。

Answer 3

将蓝框放在static位置，或将z-index:1;设置为.outer div。 .outer内的任何内容都将引用.outer z-index值。

没有z-index的示例，让position:relative继续前进：

.outer {
  background: red;
  width: 200px;
  height: 100px;
  position: relative;
  /* default value, no need to rewrite it del this >z-index: auto; */
}
.inner {
  background: yellow;
  width: 50px;
  height: 50px;
  position: absolute;
  left: 0;
  top: 90px;
  /* z-index: 1;1 would be enough if none set elsewhere in same area  */
}
.bottom {
  background: blue;
  width: 200px;
  height: 100px;
  /* position: relative; drop it  no need of z-index relative,absolute,fixed comes on top of static element */
}

<div class="outer">
  <div class="inner">testing testing</div>
</div>
<div class="bottom"></div>

如果您想保留position:relative蓝框，请仅在z-index上设置.outer

.outer {
  background: red;
  width: 200px;
  height: 100px;
  position: relative;
  z-index: 1; 
}
.inner {
  background: yellow;
  width: 50px;
  height: 50px;
  position: absolute;
  left: 0;
  top: 90px;
}
.bottom {
  background: blue;
  width: 200px;
  height: 100px;
  position: relative;
}

<div class="outer">
  <div class="inner">testing testing</div>
</div>
<div class="bottom"></div>

嵌套的绝对元素必须位于底部元素的顶部

3 个答案:

MDN Docs