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

Question

我有一个 div，其中一些内容具有相对的负位置。我希望跨度出现在 x 轴上其容器的上方，但溢出-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

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

编辑：我的“证明”是如果你把

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

它不会添加卷轴，但如果你删除!important它。

Answer 2

比 use overflow-x: auto;as well 或者更好的是，省略 both 和 use overflow: auto。

Answer 3

仍然对您要实现的目标感到有些困惑。不过我玩过这个。

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;
}​