在overflow-y中定位绝对div:滚动div

Question

我有以下HTML:

<div class="container">
<div class="scrollable-block">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    <div class="absolute-div"></div>
</div>

和CSS:

.container {
    width: 200px;
    height: 300px;
    background: green;
}

.scrollable-block {
    width: 200px;
    max-height: 250px;
    overflow: scroll;
    position: relative;
}

.absolute-div {
    width: 20px;
    height: 20px;
    background: purple;
    position: absolute;
    top: 0;
    right: -10px;
}

这是一个现场演示:http://jsfiddle.net/BYTam/1/

绿色div是容器,具有固定的宽度.黄色div位于其中,并具有max-height和overflow-y:scroll.它意味着与绿色宽度相同.我试图绝对地定位紫色div,相对于黄色div,但在绿色div之外 - 原因是我不希望黄色div有水平滚动条.这甚至可能吗？

谢谢!

Answer 1

如果您不想要水平滚动条，只需更改overflow:scroll为

overflow-y:scroll;
overflow-x:hidden;