CSS：父母有溢出，但我绝对的孩子想要消极

Question

如何让子“#mark”元素在“溢出-y：隐藏”属性的div中出现“-10px left”

此处示例：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'的组合是不可能的：如果一个指定为'visible'而另一个是'滚动'或'自动'，然后'可见'设置为'自动'。如果'overflow-y'相同，'overflow'的计算值等于'overflow-x'的计算值;否则它是'overflow-x'和'overflow-y'的计算值对。

这意味着overflow-x: visible与auto结合后会设置为overflow-y: scroll，从而隐藏溢出。