html - 设置溢出 :hidden only for certain elements

Question

http://jsfiddle.net/waitinforatrain/sEX3n/

我在容器中有两个具有绝对位置的 div。它们都被设置在容器的边界之外。如果我取消注释 overflow: hidden 行，它将隐藏容器外的所有内容。

但是，我只希望 div1 的溢出被隐藏，而 div2 的溢出是可见的。但是因为 overflow:hidden 必须在父级中设置，所以它会隐藏它们。有什么方法可以隐藏吗？

即使我能得到它以便它在顶部和底部边界显示溢出但不在适合的左侧和右侧显示溢出(我尝试弄乱 overflow-x 和 overflow-y 但我认为这不是他们的预期目的).

<div id="container"> 
    <div id="div1"></div> 
    <div id="div2">Test</div> 
</div> 

#container {
    width: 300px;
    position: relative;
    border: 1px solid #000;
    height: 10px;
    /*overflow: hidden;*/
}

#div2 {
    position: absolute;
    top: 16px;
    border: 1px solid #444;
}

#div1 {
    position: absolute;
    height: 10px;
    left: 90%;
    width: 15%;
    background-color: purple;
}

Answer 1

最明显的解决方案是:

• 添加一个额外的包装器 div。
• 将 overflow: hidden 应用于此 div。
• 将时间移到此 div 之外。

像这样:http://jsfiddle.net/sEX3n/4/