Question

以下是问题的jsFidle：https://jsfiddle.net/mvn0orto/

我有这个HTML：

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

我有这个CSS：

.page{
    width:200px;
    height:300px;
    background:red;
    position:relative;
}
.navbar{
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:60px;
    background:green;
}
.main{
    position:absolute;
    top:70px;
    left:10px;
    right:10px;
    bottom:10px;
    background:blue;
}
.main:before{
    content:'.main:before';
    display:block;
    background:pink;
    height:50px;
    width:100px;
    position:absolute;
    top:0;
    transition-duration: 0.3s;
}

我的.page可以有2个州，.state1和.state2。在国家的运作中，我应用了不同的翻译：

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

因此，在.state2中，我的:before伪元素位于.main div之外。

问题是：.main div位于overflow:hidden，但它并不隐藏在我的所有:before元素中...

我怎么能实现这一目标？在我在问题开头提供的jsfiddle中，我希望我的粉红色方块在离开.main div时消失。

感谢您的回复！：）

Answer 1

只需将z-index添加到.navbar，如下所示

＆＃13;

$('button').click(function(){
    $('.page').toggleClass('state1').toggleClass('state2');
});

＆＃13;

.page{
    width:200px;
    height:300px;
    background:red;
    position:relative;
}
.navbar{
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:60px;
    background:green;
    z-index: 1;
}
.main{
    position:absolute;
    top:70px;
    left:10px;
    right:10px;
    bottom:10px;
    background:blue;
}
.main:before{
    content:'.main:before';
    display:block;
    background:pink;
    height:50px;
    width:100px;
    position:absolute;
    top:0;
    transition-duration: 0.3s;
}
.state1 .main:before{
    transform:translateY(0);
}
.state2 .main:before{
    transform:translateY(-100%);
}









button{
    position:fixed;
    right:100px;
    top:20px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page state1">
    <div class="navbar"></div>
    <div class="main"></div>
</div>
<button>Click me</button>

＆＃13;

Answer 2

在我看来，你overflow:hidden; div上实际上没有.main。添加它似乎可以得到你想要的结果。

https://jsfiddle.net/2xf5j53j/3/

Answer 3

见overflow（强调我的）：

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

由于::before伪元素绝对定位，因此containing block

由最近的祖先建立，其位置为 '绝对'，'相对'或'固定'。

因此，如果.main静态定位，overflow: hidden将不会隐藏伪元素。但是，.main也绝对定位，因此overflow: hidden有效。

$('button').click(function(){
  $('.page').toggleClass('state1').toggleClass('state2');
});

.page {
  width: 200px;
  height: 300px;
  background: red;
  position: relative;
}
.navbar {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 60px;
  background: green;
}
.main {
  position: absolute;
  top: 70px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  background: blue;
  overflow: hidden;
}
.main:before {
  content: '.main:before';
  display: block;
  background: pink;
  height: 50px;
  width: 100px;
  position: absolute;
  top: 0;
  transition-duration: 0.3s;
}
.state1 .main:before {
  transform: translateY(0);
}
.state2 .main:before {
  transform: translateY(-100%);
}
button {
  position: fixed;
  right: 100px;
  top: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="page state1">
  <div class="navbar"></div>
  <div class="main"></div>
</div>
<button>Click me</button>

如何隐藏：在溢出之前：隐藏元素

3 个答案: