CSS溢出 - 未按预期工作 [英] CSS Overflow - Not working as expected
问题描述
在我看来,上面的例子应该看起来像一个灰色框, #x
不会越过边缘和 #y
戳出底部。
In my mind the above example should look like a grey box with #x
not going past the edge and #y
poking out the bottom.
但它不是那样 - 显然设置 overflow-x:hidden;
导致溢出-y:scroll |自动;
。
But it's not like that - apparently setting overflow-x: hidden;
causes overflow-y: scroll | auto;
.
有什么办法吗?
我需要允许某些元素逃离边界框在 #box
上设置 overflow:visible
。
Is there any way around this?
I need to allow certain elements to escape the bounding box without setting overflow: visible
on #box
.
推荐答案
#y
无法突破其边框,而不会退出文档流。添加 position:absolute; 到
#y
给你之前的效果吗?
#y
can't break out of its bounding box without being taken out of the flow of the document. Does adding position: absolute;
to #y
give the effect you're after?
更新
重新组织的HTML示例,包括一个容器框,尝试一下: http://jsfiddle.net/GfNbp
Restructured HTML example, including a containing box to allow everything to be easily positioned together. Try it out here: http://jsfiddle.net/GfNbp
<div id="container">
<div id="box">
<div id="x"></div>
</div>
<div id="y"></div>
</div>
#box {
width: 100px;
height: 100px;
margin: 10px;
background: #ededed;
padding: 10px;
/* ADD THE OVERFLOW */
overflow-x: hidden;
overflow-y: visible;
}
#container{
position: absolute;
top: 30px;
left: 20px;
}
#x {
width: 150px;
height: 10px;
background: #c1ffb2;
}
#y {
width: 10px;
height: 150px;
background: #c4b2ff;
position: absolute;
left: 20px; /* margin+padding */
top: 30px; /* margin+padding+x-height */
}
这篇关于CSS溢出 - 未按预期工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!