Html 溢出隐藏似乎不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10154786/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Overflow hidden doesn't seem to work
提问by user1184100
I have a div containing text and image and text details within ul li and below is the html structure . I have applied overflow hidden to class .sbox but it doesn't seem to work and the text details doesn't appear to be hidden and overflown.
我在 ul li 中有一个包含文本和图像和文本详细信息的 div，下面是 html 结构。我已将溢出隐藏应用于类 .sbox，但它似乎不起作用，并且文本详细信息似乎没有被隐藏和溢出。
JSFiddle - http://jsfiddle.net/SAN6n/
JSFiddle - http://jsfiddle.net/SAN6n/
HTML
HTML
<div id="content" class="contentList">
<ul id="slist" class="storyList">
<li>
<div id="storyBox1" class="sbox">
<div class="boxContent" >
<span class="overlay"><h5>Picture1 </h5></span>
<div class="txtOverlay"><h3>This is spring and weather looks good ...</h3</div>
<span><img src="http://img13.imageshack.us/img13/38/picture11tp.jpg"/></span>
</div>
</div>
</li>
</ul>
</div>?
CSS
CSS
.storyList {
width:100%;
height:100%;
}
.sbox {
float:left;
width:300px;
height:150px;
padding: 5px 7px 8px 5px;
margin-top:20px;
margin-right:40px;
background:white;
border:1px solid #DDD;
<!--border radius-->
-webkit-border-radius: 3px;
-moz-border-radius: 2px;
border-radius: 3px;
overflow: hidden;
}
.boxContent {
width:100%;
height:100%;
border: 1px solid #777;
}
.storyList li {
list-style:none;
}
.overlay {
float:left;
opacity: .7;
background: #000;
height: 40px;
width: 300px;
position: absolute;
}
h5{
float:left;
margin-top:0px;
padding:0 0 0 5px;
font-family: Tahoma;
letter-spacing: 0.5px;
font-size:30px;
color: white;
}
.txtOverlay {
opacity: .7;
background: #000;
height: 110px;
width: 300px;
position: absolute;
margin-top:150px;
z-index:1;
font-weight:bold;
float:left;
font-family: OpenSansRegular;
letter-spacing: 0.5px;
font-size:10px;
color: white;
}?
回答by coder
回答by austincheney
It is because you are using position absolute. You cannot use position absolute with overflow hidden, because position absolute moves the targeted element out of context with the document structure.
这是因为您使用的是绝对位置。您不能在隐藏溢出的情况下使用绝对位置，因为绝对位置将目标元素移出文档结构的上下文。
回答by Starx
Actually It is working, the padding you gave and the content it has, it making it useless of applying the overflow:hidden;
实际上它是有效的，你提供的填充和它拥有的内容，它使得应用 overflow:hidden;
See this demoto see my point, I have decrease the height, and the overflow:hiddenis working.
请参阅此演示以了解我的观点，我降低了高度，并且overflow:hidden正在工作。
回答by Yaron U.
when you give your element an absolute position - it can also be placed outside of the div's bounds - therefore - the overflow hidden should not be affecting it
当你给你的元素一个绝对位置时 - 它也可以放在 div 的边界之外 - 因此 - 隐藏的溢出不应该影响它
