html - オーバーフロー-コンテナ内の要素の可視性に影響を与えるy

Question

相対的な位置が負のコンテンツを含むdivがあります。スパンを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/ 。オーバーフロー-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。