溢出 - 影响容器内元素的可见性

Question

我有一个div，其中一些内容具有负面的相对位置。我希望span在x轴上出现在其容器上方，但overflow-y正在剪切我的文本。我需要它有一个垂直卷轴。

我不想要横向滚动。 我想要一个垂直滚动。 文本应出现在容器上方。

我该怎么做？

<div id="test">
    <span class="row"> Text Text Text </span>   
    <span class="row"> Text Text Text </span>  
    <span class="row"> Text Text Text </span>   
</div>​


#test {
    height:100px;
    width:100px;
    clip: rect(auto,auto,auto,auto);
    overflow-y: auto;
}
.row {
    position:relative;
    left:-11px;
    display: block;
}​

http://jsfiddle.net/jZrER/。尝试删除overflow-y以查看会发生什么。 我需要这样的东西：http://jsfiddle.net/e7MXD/但是有垂直滚动。

这就是我想要完成的事情： 蓝色部分是垂直卷轴（我没有时间绘制它）。

Answer 1

也可以使用overflow-x: auto;，或者更好的是，省略两者并使用overflow: auto。

Answer 2

对于你想要达到的目标仍然有点困惑。虽然我玩这个。

http://jsfiddle.net/e7MXD/1/

<div id="test">
    <span class="row"> Text Text Text </span>   
    <span class="row"> Text Text Text </span> 
    <span class="row"> Text Text Text </span> 
    <span class="row"> Text Text Text </span> 
     <span class="row"> Text Text Text </span> 
     <span class="row"> Text Text Text </span> 
     <span class="row"> Text Text Text </span> 
</div>​​​​

#test {

    margin-left:50px;
    margin-top:50px;
    border:1px solid black;
    height:100px;
    width:100px;
}

.span-container {
    margin-left:50px;
    margin-top:50px;    
overflow-y:scroll; 
overflow-x:visible;  
height:100px;   
    width:200px
}

.row {
    position:relative;
    left:-11px;
    display: block;
}​

Answer 3

我希望有人在这方面证明我错了。我不认为它可能在css中使用溢出。我使用了overflow-x：visible;，似乎滚动条有一个内置的裁剪功能（毕竟，你不希望内容在滚动条上方/下方）。然而，可能有一种聪明的方式来复制它。

修改：我的'证明'是你放

overflow-x: visible; !important
overflow-y: auto;

它不会添加滚动条，但如果您删除!important它会。