Question

This codepen证明了这个问题。请注意，红色块.popup在顶部被切断。

它正被它顶部的爷爷div #hideExtraWidth切断。

我需要隐藏额外的宽度（overflow-x），因为我在实际实现中有什么（JS更改#wide div以创建轮播效果），但它似乎也隐藏了额外的高度（溢出-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>

屏幕上的div高于父div

2 个答案: