使用溢出-y：隱藏或溢出-x：隱藏以僅隱藏元素的一側

標題幾乎要求問題，但我知道使用overflow-y: hidden和overflow-x: hidden你可以隱藏頂部和底部或左側和騎一個元素的一面，但有沒有辦法只隱藏一邊使用這些選擇器。使用溢出-y：隱藏或溢出-x：隱藏以僅隱藏元素的一側

特別是我有興趣隱藏一個溢出而不是頂部的div的底部。

如果不是有任何其他的CSS方式來完成這個預期的效果？

有一個合理的目的，需要這個，我想看看是否有一個標準的方式做到這一點。

要稍微解釋一下，我只在CSS的幻燈片的控制，我需要推一個元素幻燈片div裏面了div上述然而overflow: hidden值被切斷這推高了div當我這樣做。我當然可以完全刪除overflow: hidden，但那樣做並不能爲您帶來非常好的幻燈片！

小提琴包含如下：

https://jsfiddle.net/ejhyz7t3/

來源

2013-03-26 Peter Featherstone

請寫一個小提琴來演示你正在嘗試做什麼。 – 2013-03-26 22:47:17

確保內容不在'div'的頂部之上開始？ – 2013-03-26 22:47:23

嗨帕克內爾。我希望這很容易，但是我只是在控制CSS，因此我需要將div中的元素放在div上方，但溢出：當我這樣做時，隱藏的值會將其切斷。 – 2013-03-26 22:48:54

基於示例中的問題的下面的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); 
}

來源

2017-07-25 17:40:47

我有一個類似的問題在那裏我有一個可拖動的div，我想溢出向右/向下，但不頂/左。我通過調整z-index來解決它。容器div到z-index：0px;可拖動到z-index：500px;並在頂部和左側（菜單）div-z-index：1000px ;.這有效地夾着可拖動的層，允許在我想要的方向上溢出。

來源

2013-08-26 17:39:49 user2718966

z-index不能在px中給出 – nottinhill 2016-11-19 07:18:40

-1

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

設置剪輯矩形的底部到auto剪輯像overflow: hidden會有。 -100px值是任意選擇的，以留出溢出空間。

來源

2015-11-09 12:21:17 h0b0

使用溢出-y：隱藏或溢出-x：隱藏以僅隱藏元素的一側

回答

相關問題