CSS的flyout div超出了 overflow auto div

Question

我有一个侧边栏，希望其内容在侧边栏的边界内滚动。我还想要一个“弹出”div，它超出侧边栏的边界。这种情况是否可能？

以下是我的jsFiddle示例：http://jsfiddle.net/Takanudo/NE53A/3/ 我有两个侧边栏。Sidebar 1的overflow设置为auto。在Sidebar 1中，flyout不会超出Sidebar 1的边界。Sidebar 2的overflow设置为visible。在Sidebar 2中，flyout按预期工作。不幸的是，Sidebar 2不再滚动。我能否同时拥有滚动侧边栏和超出边界的flyout？我的方法不正确吗？

以下是我使用的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;
}

- Takanudo

---

不知道CSS怎么解决这个问题。JS是一个选项吗？如果是，可以查看这个链接：http://jsfiddle.net/anpsmn/NE53A/6/。添加`position:absolute`并将点击区域的`left`和`top`属性赋值给弹出框。 - anpsmn

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);
});

- Yako