Once assigning overflow with a value other than visible, all its child elements will be clipped. It is the purpose of the overflow property. However, I have to make one of the child elements to be 'floated' and not clipped (like a popup) -- just one of them; not all. Is it possible?
一旦使用除可见之外的值分配溢出,其所有子元素都将被剪裁。这是溢出属性的目的。但是,我必须使其中一个子元素被“浮动”而不是剪辑(如弹出窗口) - 只是其中之一;不是全部。可能吗?
Take the following as an example. Is there any CSS setting that does not clip the yellow div, while clipping the blue element? (Currently they are both clipped)
以下面的例子为例。是否有任何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>
The code can be also found at http://jsfiddle.net/kZBxD/
该代码也可以在http://jsfiddle.net/kZBxD/找到
2 个解决方案
#1
4
Do you need something like this:
你需要这样的东西:
check this fiddle : http://jsfiddle.net/kZBxD/3/
检查这个小提琴: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>
#2
0
try the below fiddle: the yellow div is floating outside and blue div is inside as per you need.
尝试下面的小提琴:黄色div漂浮在外面,蓝色div在你需要的内部。
#1
4
Do you need something like this:
你需要这样的东西:
check this fiddle : http://jsfiddle.net/kZBxD/3/
检查这个小提琴: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>
#2
0
try the below fiddle: the yellow div is floating outside and blue div is inside as per you need.
尝试下面的小提琴:黄色div漂浮在外面,蓝色div在你需要的内部。