由于over div没有定位，z-index不知道在哪里和如何定位它（与什么有关？）。只需将over div的位置更改为relative，这样就不会对该div产生任何副作用，然后under div将按照您的意愿进行操作。

这是您在jsfiddle上的示例。

解决方法：将over div的位置更改为relative。

问题出现的原因是，当使用固定定位（fixed positioning）时，z-index属性无法生效。这是因为固定定位的元素会创建一个新的层叠上下文（stacking context），而在层叠上下文内部，元素的层叠顺序遵循一定的规则。

解决这个问题的方法有两种：

1. 为具有负z-index值的定位元素（及其子元素）设置z-index为-1，这样它们就会出现在非定位元素的后面。

2. 将需要显示在定位元素后面的元素的position属性设置为relative，这样它们就会按照规则5进行层叠。

问题的根本原因是开发人员应该了解以下内容：

1. 当形成一个层叠上下文时：

- 默认情况下，元素是文档的根元素，并且是第一个层叠上下文。

- 具有position属性值不为static且z-index属性值不为auto的元素。

- 具有不透明度小于1的元素。

- 一些较新的CSS属性也会创建层叠上下文，包括transforms、filters、css-regions、paged media等。

2. 层叠上下文内的层叠顺序：

- 层叠上下文的根元素（默认情况下为元素，但任何元素都可以成为层叠上下文的根元素）。

- 具有负z-index值的定位元素（高值会在低值的前面，具有相同值的元素按照在HTML中的出现顺序进行层叠）。

- 非定位元素（按照在HTML中的出现顺序进行层叠）。

- 具有z-index值为auto的定位元素（按照在HTML中的出现顺序进行层叠）。

- 具有正z-index值的定位元素（高值会在低值的前面，具有相同值的元素按照在HTML中的出现顺序进行层叠）。

这些规则限制了在根层叠上下文元素后面放置子元素的能力。这对于具有粘性定位（position: sticky）的元素的阴影层是一个问题，因为无法通过设置z-index值使其显示在粘性元素的后面。

以上就是关于z-index在固定定位中无法生效的原因和解决方法的内容。

问题出现的原因是因为在#over元素上添加了position: relative属性，导致z-index属性不起作用。解决方法是将#over元素上的position: relative属性移除。

解决方法代码示例：

#over {
  width: 600px;
  z-index: 10;
}

此外，关于position fixed、absolute和relative与z-index的交互作用，可以参考updates.html5rocks.com/2012/09/…。关于堆叠上下文的示例，可以参考developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context。

通过移除#over元素上的position: relative属性，可以解决z-index与fixed定位不起作用的问题。