当屏幕高于父div时，div被切断

Question

This codepen显示该问题。请注意，红色块.popup在顶部被切断。

它被切碎的祖父母的顶部，div #hideExtraWidth。我需要隐藏额外的宽度（overflow-x），因为我在我的实际实现中（JS更改了#wide div以创建旋转木马效果），但它似乎也隐藏了额外的高度（溢出-x） Y）...，即使我有这样的：

overflow-x: hidden; 
overflow-y: visible; 

如果你把两个溢出属性..你会看到它修复被砍伤的顶部，但在休息，现在宽度溢出现在是可见以及。

如何避免.popup的顶部被切碎，同时保持水平溢出隐藏？

Answer 1

可悲的是，“‘visible’ becomes ‘auto’ also when combined with ‘hidden’”。解决方法：通过更改padding: 30px→padding: 130px，使容器足够大以容纳溢出，然后将其移回到位置margin-top: -100px。 Sample。

Answer 2

我已经将溢出更改为#outer div ..这样，您的旋转木马的所有内容都不会出现，您仍然可以弹出。

试试这个：

$(".item").one("mouseenter", function() { 
 
    $("<div>") 
 
    .addClass("popup") 
 
    .appendTo($(this)); 
 
});

#outer { 
 
    position: relative; 
 
    padding: 0 0 0 0; 
 
    width: 700px; 
 
    margin: 0 auto; 
 
    border: 1px solid red; 
 
    overflow: hidden; 
 
} 
 
#somethingElse { 
 
    text-align: center; 
 
    background-color: purple; 
 
    height: 100px; 
 
    color: white; 
 
} 
 

 
#hideExtraWidth { 
 
    width: 700px; 
 
    height: 570px; 
 
    padding-top: 30px; 
 
    padding-bottom: 25px; 
 
    margin: 0; 
 
    position: relative; 
 
    display: block; 
 
    white-space: nowrap; 
 
} 
 

 
#wide { 
 
    margin-left: -400px; 
 
    padding: 0; 
 
    width: 1500px; 
 
    position: relative; 
 
    top: 0; 
 
    left: 0; 
 
    display: block; 
 
} 
 

 
.item { 
 
    border: 1px solid blue; 
 
    background-color: green; 
 
    white-space: normal; 
 
    width: 495px; 
 
    height: 515px; 
 
    padding: 0; 
 
    margin: 0; 
 
    display: inline-block; 
 
} 
 

 
.popup { 
 
    position: absolute; 
 
    top:-70px; 
 
    height: 100px; 
 
    width: 100px; 
 
    background-color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="outer"> 
 
    <div id="somethingElse">Something else</div> 
 
    <div id="hideExtraWidth"> 
 
    <div id="wide"> 
 
     <div class="item"></div> 
 
     <div class="item"></div> 
 
     <div class="item"></div> 
 
    </div> 
 
    </div> 
 
</div>