Question

我试图在h2元素中包含的跨度上实现滑动门效果。 h2元素的位置设置为相对，以便启用z-index，到目前为止一直很好。跨度在此h2元素内向右浮动，并且z-index设置为低于h2，以便在视图收缩时在其下方滑动，但保持在下面，就好像只有＆＃39 ;浮动＆＃39;这里很重要。

但是，这就是我得到的东西，然后是我希望得到的东西：

Current result of z-indexed span within z-indexed h2:

Desired result

包含H2元素的CSS：

 width: 400px; 
 height: 24px;
 font-size: 13px;
 vertical-align: bottom;
 position: relative;
 z-index: 5;
 padding: 2px;
 color: white;
 text-align: left;
 background: url('left-door.gif') top left no-repeat;

嵌套span元素的CSS：

 width: 200px;
 height: 100%;
 float: right;
 z-index: 0;
 text-align: center;
 background: url('right-door.gif') top right no-repeat;

任何人都知道为什么跨度拒绝与h2保持水平，即使h2的固定高度应该限制在它内部（设置清楚：两者都没有做任何事情），并且当它被遮挡时视图收缩？这是因为它是嵌套的？

（另外，＆＃39; vertical-align＆＃39;没有效果，文字没有落在文字底部但是处于垂直中间。顺便说一下，刚刚开始这个修补，但碰巧匆忙。谢谢。）

编辑：在BHouwens回答之后，我尝试通过减少H2的文本内容（真实代码有文本），并且跨度对齐水平，唯一的问题是z-index似乎不起作用，但是从我记得上一个问题，z-index并不适用于嵌套元素，因为它们不能叠加在父元素的上方或下方。感谢您帮助排除故障！这有助于我更好地关注，现在想我只需在h2中添加两个跨度！

Answer 1

可能，下面的代码对你有用！

h2 {
  width: 400px;
  height: 24px;
  font-size: 13px;
  vertical-align: bottom;
  position: relative;
  display: table-cell;
  z-index: 5;
  padding: 2px;
  color: white;
  background: #ff0;

}
span {
  width: 200px;
  height: 100%;
  right: 0px;
  top: 0px;
  z-index: 0;
  text-align: center;
  background: #f00;
  position: absolute;
}
span .wrap {
  display: table-cell;
  height: 24px;
  width: inherit;
  vertical-align: bottom;
  text-align: center;
}

<h2>
  H2
  <span>
    <div class="wrap">Span</div>
  </span>
</h2>

Answer 2

仅使用您的代码，这可以达到您想要的结果：https://jsfiddle.net/dzpfkoLy/

我的猜测是你有一些其他的CSS代表这些元素（你可以使用Chrome或Firefox中的dev工具进行检查，看看这可能是什么）。否则，如果您想确保所需的结果，可以将span设置为

span {
   // other span styling

   position: absolute;
   right: 0;
   top: 0;
}

将它分流到h2的右上角。然后，您可以使用z-index来获得您想要的任何订单。

嵌套float上的Z-index不起作用

2 个答案: