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

一旦赋值溢出的值不是可见的，它的所有子元素都将被剪切。这是溢出属性的目的。但是，我必须让其中一个子元素“浮动”，而不是被剪裁（如弹出） - 只是其中的一个;不是全部。可能吗？如果父级的溢出不可见，如何防止裁剪子元素？

以下列为例。是否有任何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

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

回答

相关问题