使用overflow-y: hidden或overflow-x: hidden来仅隐藏元素的一侧

Question

标题基本上已经问出了问题，但我知道使用overflow-y: hidden和overflow-x: hidden可以隐藏元素的顶部和底部或左侧和右侧，但有没有办法只使用这些选择器来隐藏一侧。

尤其是我想隐藏溢出的

的底部，而不是顶部。

如果没有，是否有其他仅使用CSS就可以实现此所需效果的方法？

有合法的需要，我想看看是否有标准的方法可以做到这一点。

稍微解释一下，我只控制幻灯片的CSS，我需要将元素推到幻灯片

的上方，但是当我这样做时，overflow: hidden的值会切断这个被推上去的

。当然，我可以完全删除overflow: hidden，但那样并不是一个很好的幻灯片！

以下附有一个fiddle：

https://jsfiddle.net/ejhyz7t3/

- Peter Featherstone

---

请编写一个fiddle来演示您想要做的事情。 - Marc Audet

确保内容不会超出 div 的顶部？ - Mark Parnell

嗨，Mark Parnell。我希望这很容易，但这只是我控制CSS的事情，我需要将一个元素推到div上方，但当我这样做时，overflow: hidden值会将其截断。 - Peter Featherstone

也许你可以画一个简单的图形，展示一下你想要实现的内容！？ - Ignitor

我认为它与这个 jsFiddle演示 相似。我也无法在应用overflow-y后使其不裁剪。 - Travis J

Answer 1

以下jsfiddle基于问题中的示例，使用clip提供了仅裁剪底部边缘的期望效果: https://jsfiddle.net/ejhyz7t3/2/ 完整代码如下以供参考: HTML

<div class="outer-container">
   <div class="inner-container">
   </div>
</div>

CSS

.outer-container {
  background: red;
  height: 100px;
  margin-top: 100px;
  width: 150px;
  padding-left: 50px;
}

.inner-container {
  background: green;
  height: 200px;
  width: 100px;
  transform: translateY(-50px);
  position: absolute;
  clip: rect(0, 100px, 150px, 0);
}

- user8307729

Answer 2

我曾经遇到过类似的问题，我有一个可拖动的div，我想让它向右/向下溢出，但不是向上/向左。我通过调整z-index解决了这个问题。将容器div设置为z-index:0px; 将可拖动的div设置为z-index:500px; 将顶部和左侧的div（菜单）设置为z-index:1000px;。这有效地夹在了可拖动层中，使其可以朝我想要的方向溢出。

- user2718966

---

z-index 不应以 px 为单位给出。 - Stephan Kristyn

Answer 3

使用clip-path对我有效。 clip似乎已被弃用。

仅隐藏底部：

element.style {
    clip-path: polygon(0 -100%, 100% -100%, 100% 100%, 0% 100%);
}

- Omar Shishani

Answer 4

.mydiv {  
    clip: rect(-100px, -100px, auto, -100px);  
}

将剪辑矩形的底部设置为auto，就像overflow: hidden一样进行裁剪。 -100px的值是任意选择的，留出一些空间以便溢出。

- h0b0