使用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
控制显示层级的效果了。