css - CSS 弹出 div 超出溢出自动 div

Question

我有一个侧边栏，我想在侧边栏的边界内滚动其内容。我还希望有一个延伸到侧边栏边界之外的“弹出”div。这样的事情可能吗？

这是一个 jsFiddle 来演示我的方法：http: //jsfiddle.net/Takanudo/NE53A/3/

我有两个侧边栏。边栏 1 的溢出设置为自动。在侧边栏 1 中，弹出按钮不会超出侧边栏 1 的边界。侧边栏 2 的溢出设置为可见。在侧边栏 2 中，弹出按钮按需要工作。不幸的是，Sidebar 2 不再滚动。我可以同时拥有一个带有超出边界的弹出按钮的滚动侧边栏吗？我的方法不正确吗？

这是我正在使用的 CSS：

#main{
  float: left;
}
#sidebar2{
  background: yellow;
  width: 200px;
  height: 500px;
  float: right;
  overflow: visible;
}
#sidebar1{
  background: orange;
  width: 200px;
  height: 500px;
  float: right;
  overflow: auto;
  margin-right: 50px;
}
.content{
  border: 1px solid red;
}
.options{
  background: blue;
  color: white;
  text-align: right;
  height: 20px;
  cursor: pointer;
}
.flyout{
  background: green;
  position: relative;
  width: 500px;
  height: 150px;
  top: 0;
  left: -300px;
  text-align: left;
  display: none;
}

Answer 1

这是一个带有 JS 解决方法的工作小提琴。 http://jsfiddle.net/7TFn4/

.flyout设置为position:absolute。

$(".options").click(function(){
    $(".flyout", this).toggle();
    var offset = $(this).offset();
    $(this).children('.flyout').css('left',offset.left-300);
    $(this).children('.flyout').css('top',offset.top);
});