這個標(biāo)題提出了一個問題，但是我知道使用overflow-y: hidden和overflow-x: hidden你可以隱藏一個元素的頂部和底部或者左邊和右邊，但是有沒有一種方法可以使用這些選擇器只隱藏一邊呢？

我特別感興趣的是隱藏溢出的div的底部，而不是頂部。

如果沒有，有沒有其他的CSS方法來達(dá)到這個效果？

有一個合法的目的需要這個，我想看看是否有這樣做的標(biāo)準(zhǔn)方式。

稍微解釋一下，我只控制幻燈片的CSS，我需要將幻燈片div中的一個元素推到div上方，但是當(dāng)我這樣做時，溢出:隱藏的值會切斷這個向上推的div。我可以移除溢出部分:當(dāng)然是完全隱藏的，但這并不能產(chǎn)生一個非常好的幻燈片！

下面包括一把小提琴:

https://jsfiddle.net/ejhyz7t3/

根據(jù)問題中的示例，下面的js dild提供了使用clip僅切斷底部邊緣的預(yù)期效果:

https://jsfiddle.net/ejhyz7t3/2/

完整代碼復(fù)制如下以供參考:

超文本標(biāo)記語言

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

半鑄鋼?鋼性鑄鐵(Cast Semi-Steel)

.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);
}

我有一個類似的問題，我有一個可拖動的div，我想溢出到右/下，但不是上/左。我通過調(diào)整z索引解決了這個問題。容器div到z-index:0px；可拖動到z索引:500像素；頂部和左側(cè)的div(菜單)到z-index:1000 px；。這有效地將可拖動層夾在中間，允許向我想要的方向溢出。

使用剪輯路徑為我工作。剪輯似乎已被否決。

僅隱藏底部:

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

設(shè)置剪輯矩形的底部自動剪輯像溢出:隱藏會有。 -100px值是任意選擇的，以便為溢出留出一些空間。