z-index 和 position fixed 如何在 css 中协同工作

Posted 2023-03-06

【中文标题】z-index 和 position fixed 如何在 css 中协同工作

【英文标题】：How does z-index and position fixed work together in css

【发布时间】：2013-04-28 01:06:24

【问题描述】：

body 
  height: 3000px;


.fixed 
  position: fixed;
  width: 100%;
  height: 60px;
  top: 0;
  left: 0;
  background: #f4f4f4;


.fixed h3 
  position: relative;
  z-index: 300;
  color: #fff;


.overlay 
  background-color: #000;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: .5;
  position: fixed;
  z-index: 1;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;

<div class="overlay"></div>
<div class="fixed">
  <center>
    <h3>
      Only this thing should be brought on top of overlay..
    </h3>
  </center>
</div>

现在我如何将 h3 放置在覆盖层顶部的 .fixed div 中。请与 z-index 一起发布一些关于 fixed 的阅读。

http://jsfiddle.net/CvMLw/4/ 检查上面的jsfiddle，那么我如何将h3放在覆盖层之上..

【问题讨论】：

z-index not working with fixed positioning的可能重复

请告诉我您没有使用 br 标签进行页面布局。如果你使用两个以上，那你就错了。

您将absolute 和fixed 两个位置组合为同一元素.overlay

@fotanus - 我在地上打滚！

@blachawk 我无法专注于这个问题

【参考方案1】：

改变你的

position:fixed; 

到

position:absolute; 

在.fixed 上，然后就可以了。

【参考方案2】：

如果.fixed 元素充当其任何子元素的持有者，则不能这样做。

这意味着，例如，如果您将h3 设置为底部的绝对位置，它将转到其父元素的底部。

z-index 的工作方式相同。它的值将由父级继承。由于z-index 默认值为0，您的.fixed 元素的z-index 值为0，而您的h3首先有0，然后是300 .

【参考方案3】：

您在覆盖层下方的固定div 内的元素上设置z-index。

换句话说，隐藏z-index 值的叠加层是301。

你看，它就像乐高积木。 .fixed 位于底部，其 z-index 为 0。

然后在.fixed 你的h3 是一个300 个块。

例如，如果我们在h3 标记下方添加另一个div，其中z-index 为150，则“方块塔”将低于h3，因此h3 将位于顶部.

然后还有另一个div(.overlay) 在与.fixed 相同的DOM 级别上，z-index 比.fixed 更高。该块将放置在h3 的 300 个块之上。

例如：

<==============================>   <- the .overlay (z-index 1)
            <=>
            <=>
            <=>
            <=>
  <=>       <=>                <- Elements inside .fixed (random z-index)
  <=>       <=>
  <=>       <=>
  <=>       <=>
  <=>       <=>
<==============================>    <- the .fixed (z-index 0)

要将 h3 设置在顶部，请将其放在与叠加层相同的 lvl 上或设置更高的 .fixed z-index。