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

Question

如何使子“#mark”元素在具有“overflow-y:hidden”属性的div内出现“-10px”

这里的例子：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'或“自动”，然后“可见”设置为“自动”。如果 'overflow-y' 相同，'overflow' 的计算值等于 'overflow-x' 的计算值；否则它是'overflow-x'和'overflow-y'的一对计算值。

这意味着overflow-x: visible将设置为auto当与overflow-y: scroll并因此隐藏溢出时。