Html 如何在溢出：隐藏元素中隐藏：before

下面是解决此问题的一个示例：

我有这个HTML：

<div class="page state1">
    <div class="navbar"></div>
    <div class="main"></div>
</div>

我的

.page

可以有两种状态，

.state1

和

.state2

。在状态的作用下，我应用了一个不同的translateY：

.state1 .main:before{
    transform:translateY(0);
}
.state2 .main:before{
    transform:translateY(-100%);
}

因此，在

.state2

中，my

：before

伪元素在

.main

div之外

问题是：

.main

div位于

溢出：隐藏的
，但它根本不隐藏我的
：在
元素之前

我怎样才能做到这一点？在我在问题开头提供的JSFIDLE中，我希望我的粉红色方块在退出
.main
div时消失

谢谢你的回复！：）
 只需将
z-index
添加到
.navbar
中，如下所示


$（“按钮”）。单击（函数（）{
$（'.page'）.toggleClass（'state1'）.toggleClass（'state2'）；
});
.page{
宽度：200px；
高度：300px；
背景：红色；
位置：相对位置；
}
navbar先生{
位置：绝对位置；
左：0；
右：0；
排名：0；
高度：60px；
背景：绿色；
z指数：1；
}
梅因先生{
位置：绝对位置；
顶部：70像素；
左：10px；
右：10px；
底部：10px；
背景：蓝色；
}
梅因：以前{
内容：'.main:before'；
显示：块；
背景：粉红色；
高度：50px；
宽度：100px；
位置：绝对位置；
排名：0；
过渡时间：0.3s；
}
梅因：在……之前{
变换：translateY（0）；
}
梅因：在……之前{
转换：translateY（-100%）；
}
钮扣{
位置：固定；
右：100px；
顶部：20px；
}

单击我
在我看来，您实际上没有溢出：隐藏.main
div上添加code>。添加它似乎会得到您想要的结果

参见（我的重点）：

此属性指定块容器元素的内容
当它溢出元素的框时被剪裁。它影响到
剪切除任何子元素之外的所有元素内容
元素（及其各自的内容和子元素）
包含块是视口或元素的祖先

由于
：：在
伪元素被绝对定位之前，其

由最近的祖先建立，其“位置”为
“绝对”、“相对”或“固定”

因此，如果
.main
是静态定位的，
overflow:hidden
不会隐藏伪元素。但是，
.main
也是绝对定位的，因此
溢出：隐藏
工作


$（“按钮”）。单击（函数（）{
$（'.page'）.toggleClass（'state1'）.toggleClass（'state2'）；
});
.page{
宽度：200px；
高度：300px；
背景：红色；
位置：相对位置；
}
navbar先生{
位置：绝对位置；
左：0；
右：0；
排名：0；
高度：60px；
背景：绿色；
}
梅因先生{
位置：绝对位置；
顶部：70像素；
左：10px；
右：10px；
底部：10px；
背景：蓝色；
溢出：隐藏；
}
梅因：以前{
内容：'.main:before'；
显示：块；
背景：粉红色；
高度：50px；
宽度：100px；
位置：绝对位置；
排名：0；
过渡时间：0.3s；
}
梅因：在……之前{
变换：translateY（0）；
}
梅因：在……之前{
转换：translateY（-100%）；
}
钮扣{
位置：固定；
右：100px；
顶部：20px；
}

单击我
可能我遗漏了什么，但是你的
.main
没有
溢出：隐藏
-添加此项似乎会得到你想要的结果，zelanix是正确的。你错过了溢出：隐藏在缅因州。他实际上是对的，的确。。。谢谢。。。但事实上，它在我的项目中仍然不起作用，我的例子肯定不好，我将尝试以更好的方式重现这个问题：/无论如何，谢谢！可能，在您的项目中，
.main
是静态定位的。问题是，红色应该位于粉红色之上，因为它应该从
.main
分区中取出
.state1 .main:before{
    transform:translateY(0);
}
.state2 .main:before{
    transform:translateY(-100%);
}