CSS：父母有溢出-y，但我的绝对孩子想要负向左

Question

如何让子元素“#mark”出现在“overflow-y：hidden”属性中的“-10px左侧”

示例在这里：http://jsfiddle.net/yX9j8/

取出溢出-y使“mark”元素可见-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 */ 
} 

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

Answer 2

我的直觉告诉我要设置overflow-x: visible，但这并没有解决问题。我看了一下WC3 specification，正如我的理解，这是不可能实现的overflow。这就是它所说的：

'overflow-x'和'overflow-y'的计算值与它们的指定值相同，除了某些与'visible'的组合不可用：如果一个是指定为“可见”，另一个为“滚动”或“自动”，然后将“可见”设置为“自动”。如果'overflow-y'是相同的，'overflow'的计算值等于'overflow-x'的计算值;否则它是'overflow-x'和'overflow-y'的计算值对。

这意味着，当有overflow-y: scroll结合，从而隐藏溢出overflow-x: visible将被设置为auto。