Question

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

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

我有两个侧边栏。边栏1的溢出设置为自动。在侧栏1中，弹出按钮不会超出侧栏1的边界。侧栏2的溢出设置为可见。在侧栏2中，弹出按钮可以按需运行。不幸的是，补充工具栏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);
});

CSS flyout div超越了溢出自动div

1 个答案: