Html 如何将一个元素强制置于另一个元素之上

我有两个稍微重叠的（面包屑）元素，并排排列，我想把左边的元素剪成右边的元素。设置z索引似乎不起作用。有更好的办法吗

演示：

。箭头指向{
显示：内联块；
边框顶部：12px实心透明；
边框底部：12px实心透明；
左边框：15px实心#777；
/*z指数：10*/
}
.箭体{
字体系列：verdana；
字体大小：15px；
显示：内联块；
背景色：#777；
颜色：白色；
填充：2px6px20px；
高度：20px；
垂直对齐：顶部；
/*z指数：-3*/
}
.箭尾{
位置：绝对位置；
显示：内联块；
边框顶部：12px实心透明；
边框底部：12px实心透明；
左边框：15px实心#FFF；
/*z指数：-2*/
/*左边距：-6px*/
}

子菜单A
主菜单

将

位置设置为
相对
。然后设置
z-index:9999

position属性指定用于图元的定位方法的类型


。箭头指向{
显示：内联块；
边框顶部：12px实心透明；
边框底部：12px实心透明；
左边框：15px实心#777；
/*z指数：10*/
}
.箭体{
字体系列：verdana；
字体大小：15px；
显示：内联块；
背景色：#777；
颜色：白色；
填充：2px6px20px；
高度：20px；
垂直对齐：顶部；
/*z指数：-3*/
}
.箭尾{
位置：绝对位置；
显示：内联块；
边框顶部：12px实心透明；
边框底部：12px实心透明；
左边框：15px实心#FFF；
/*z指数：-2*/
/*左边距：-6px*/
}

子菜单A
主菜单
假设所有这些菜单都在容器div内，将父样式设置为float:left；让孩子们漂浮起来：对。请确保订单必须颠倒。看一看


.container{
位置：相对位置；
浮动：左；
}
.container>div{
位置：相对位置；
左边距：-15px；
z指数：10；
字号：0；
显示：内联块；
浮动：对；
}
.container>div:最后一个子级{
左边距：0；
}
.箭头{
显示：内联块；
边框顶部：12px实心透明；
边框底部：12px实心透明；
左边框：15px实心#777；
/*z指数：10*/
}
.箭体{
字体系列：verdana；
字体大小：15px；
显示：内联块；
背景色：#777；
颜色：白色；
填充：2px6px20px；
高度：20px；
垂直对齐：顶部；
/*z指数：-3*/
}
.箭尾{
位置：绝对位置；
显示：内联块；
边框顶部：12px实心透明；
边框底部：12px实心透明；
左边框：15px实心#FFF；
/*z指数：-2*/
/*左边距：-6px*/
}

子菜单B
子菜单A
主菜单
z-index
仅适用于定位元素尝试添加
位置：相对到“主菜单”
div
。可能重复