css - CSS：親はオーバーフローしました-yですが、私の絶対的な子は負の値を残したいと思っています

Question

「overflow-y：hidden」プロパティを使用して、子「#mark」要素をdiv内に「-10pxleft」で表示する方法

ここでの例：http：//jsfiddle.net/yX9j8/

オーバーフローを取り除く-yは、「マーク」要素を左に-10px表示します。

Answer 1

スクロールにパディングを追加し、代わりにコンテンツの背景色を使用することでこれを行うことができます (それがあなたにとって重要であるように見えます)。その後、絶対 div がパディングに表示され、スクロールに従います。

#scrollable{
    padding-left: 10px; /* padding goes here */
    /*background-color:#eee;*/
    width:400px;
    height:300px;
    overflow-y:scroll;
    margin-left:50px;
    position:relative;
}
#content{
    background-color:#eee; /* background color goes here */
    height:1900px;
    width:100%;   
}
#mark{
    position:absolute;
    width:10px;
    height:10px;
    background-color:#aaa;
    left: 0;  /* the position of the absoute element */ 
}

</p>

例: http://jsfiddle.net/yX9j8/5/

Answer 2

私の本能は私に設定するように言いましたoverflow-x: visible、しかしそれは問題を解決しませんでした。WC3の仕様を調べてみましたが、解釈すると、では実現できませんoverflow。これはそれが言うことです：

'overflow-x'および'overflow-y'の計算値は、指定された値と同じですが、'visible'との組み合わせが不可能な場合があります。一方が'visible'として指定され、もう一方が'scroll'の場合または「auto」の場合、「visible」は「auto」に設定されます。'overflow-y'が同じである場合、'overflow'の計算値は'overflow-x'の計算値と等しくなります。それ以外の場合は、「overflow-x」と「overflow-y」の計算値のペアです。

これは、と組み合わせるとoverflow-x: visibleに設定され、オーバーフローを非表示にすることを意味します。autooverflow-y: scroll