如果父級的溢出不可見，如何防止裁剪子元素？

一旦賦值溢出的值不是可見的，它的所有子元素都將被剪切。這是溢出屬性的目的。但是，我必須讓其中一個子元素「浮動」，而不是被剪裁（如彈出） - 只是其中的一個;不是全部。可能嗎？如果父級的溢出不可見，如何防止裁剪子元素？

以下列爲例。是否有任何CSS設置不剪裁黃色div，同時剪裁藍色元素？（目前它們都剪輯）

<div style="position:absolute;width:100px;height:50px;overflow:hidden;border:1px solid black"> 
<div style="top:30px;width:50px;height:100px;background:yellow"> 
</div> 
<div style="position:absolute;left:50px;top:0;width:50px;height:100px;background:blue"> 
</div> 
</div>

的代碼可以也發現在http://jsfiddle.net/kZBxD/

來源

2012-03-17 Tom Yeh

正是你想要什麼？ – Jack 2012-03-17 07:10:47

查看我的答案，並讓我知道是否有任何問題。 – w3uiguru 2012-03-17 07:15:50

你需要這樣的東西：http://jsfiddle.net/kZBxD/3/ – Jack 2012-03-17 07:15:58

嘗試下面的小提琴：黃DIV浮動外，藍格內是按照你的需要。

http://jsfiddle.net/kZBxD/2/

來源

2012-03-17 07:15:12 w3uiguru

謝謝。不幸的是，我必須讓外部絕對也是絕對的。嵌套的絕對div也會被裁剪：http://jsfiddle.net/kZBxD/2/ – 2012-04-22 05:07:30

你介意在你的答案中添加代碼嗎？ – 2016-06-30 07:25:59

你需要的是這樣的：

檢查此琴：http://jsfiddle.net/kZBxD/3/

<div style="position:absolute;width:100px;height:50px;overflow:hidden;border:1px solid black"> 
<div style=" position:fixed;width:50px;height:100px;background:yellow"></div>

來源

2012-03-17 07:16:48 Jack

謝謝。是的，固定位置可以解決裁剪問題。不幸的是，它不會隨着它的父窗口滾動而移動。可能有兩個（不剪輯和移動與父）？ – 2012-03-17 07:36:47

你的意思是這樣的？ http://jsfiddle.net/kZBxD/4/ – Jack 2012-03-17 07:49:52

其實我不明白你想要什麼，一切皆有可能 – Jack 2012-03-17 07:52:29

如果父級的溢出不可見，如何防止裁剪子元素？

回答

相關問題