把子元素放在父元素的父元素后面，```z-index```不起作用。 _编程开发

把子元素放在父元素的父元素后面，```z-index```不起作用。

创始人

2024-11-26 19:01:43

0次

使用transform属性来改变子元素的位置。具体实现方法如下：

HTML代码：


  
    这是子元素

CSS代码：

.grandparent {
  position: relative; /* 建立定位上下文 */
}

.parent {
  position: relative; /* 建立相对定位 */
  z-index: 1;
}

.child {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(0, -100%); /* 把子元素上移一个父元素的高度 */
}

解决方法的关键在于给外层的祖先元素grandparent添加position: relative属性，因为定位元素的层次关系是基于它们的祖先元素的。然后给中间的父元素parent添加z-index属性来确定它的 stacking context，在这个 stacking context 中使用transform属性来把子元素child向上移动一个父元素的高度。这样就能实现将子元素放在父元素的父元素后面的使用z-index控制显示层级的效果了。

上一篇：把字母表加密成Unicode编码无法正常工作

下一篇：把Zulu时间格式的日期转换为标准时间的字符串（Python）。

把子元素放在父元素的父元素后面，```z-index```不起作用。

相关内容

热门资讯