这个问题可以通过多种方式解决，但实际上，了解堆叠规则可以使您找到最适合自己的答案。
解决方案
该
<html>元素是您唯一的堆叠上下文，因此只需遵循堆叠上下文中的堆叠规则，您将看到元素按此顺序堆叠
- 堆栈上下文的根元素（
<html>
在本例中为元素） - z索引值为负的定位元素（及其子元素）（较高的值堆叠在较低的值前面；具有相同值的元素根据HTML中的外观堆叠）
- 未定位的元素（按HTML中的外观排序）
- 定位元素（及其子元素）的z-index值为auto（按HTML中的外观排序）
- 具有正z索引值的定位元素（及其子元素）（较高的值堆叠在较低的值前面；具有相同值的元素根据HTML中的外观堆叠）
所以你可以
- 将z-index设置为-1，以使
#under
-ve z-index出现在未定位#over
元素的后面 - 设置的位置
#over
，以relative
使第5条适用于它
真正的问题
在尝试更改元素的堆叠顺序之前，开发人员应该了解以下内容。
- 形成堆叠上下文时
- 默认情况下，该
<html>
元素是根元素，并且是第一个堆叠上下文
- 默认情况下，该
- 堆叠上下文中的堆叠顺序
形成堆叠上下文时
- 当元素是文档的根元素时（该
<html>
元素） - 当元素的位置值不是静态的并且z索引值不是auto时
- 当元素的不透明度值小于1时
- 几个较新的CSS属性也创建了堆栈上下文。其中包括：转换，过滤器，css区域，分页媒体，以及其他。
- 通常，如果CSS属性需要在屏幕外的上下文中进行渲染，则它必须创建一个新的堆栈上下文。
堆叠上下文中的堆叠顺序
元素顺序：
- 堆栈上下文的根元素（
<html>
默认情况下，该元素是唯一的堆栈上下文，但是任何元素都可以是堆栈上下文的根元素，请参见上面的规则）- 您不能将子元素放在根堆栈上下文元素后面
- z索引值为负的定位元素（及其子元素）（较高的值堆叠在较低的值前面；具有相同值的元素根据HTML中的外观堆叠）
- 未定位的元素（按HTML中的外观排序）
- 定位元素（及其子元素）的z-index值为auto（按HTML中的外观排序）
- 具有正z索引值的定位元素（及其子元素）（较高的值堆叠在较低的值前面；具有相同值的元素根据HTML中的外观堆叠）
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）