无法设置DIV的不透明度或z-index覆盖fullcalendar.js

Question

我在这里有一个Fiddle覆盖了一个div（使用margin-top：-10em）在fullcalendar.js之上。从Fiddle可以看出，重叠的DIV具有一定的透明度。所以我尝试将不透明度设置为1，将z-index设置为5000，但我仍然无法使div成为可靠并隐藏其背后的fullcalendar。任何帮助将不胜感激！

以下是一些代码段。

var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();

var events_array = [{
  title: 'Test1',
  start: new Date(2012, 8, 20),
  tip: 'Personal tip 1'
}, {
  title: 'Test2',
  start: new Date(2012, 8, 21),
  tip: 'Personal tip 2'
}];
$('#calendar').fullCalendar({
  header: {
    left: 'prev,next today',
    center: 'title',
    right: 'month,agendaWeek,agendaDay'
  },
  selectable: true,
  events: events_array,
  eventRender: function(event, element) {
    element.attr('title', event.tip);
  }
});

@import 'http://arshaw.com/js/fullcalendar-1.5.3/fullcalendar/fullcalendar.css';
#demo.width {
  height: auto;
  -webkit-transition: width 0.35s ease;
  -moz-transition: width 0.35s ease;
  -o-transition: width 0.35s ease;
  transition: width 0.35s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://www.arshaw.com/js/fullcalendar-1.5.3/fullcalendar/fullcalendar.min.js"></script>
<div style="border:solid 2px red;">
  <div id='calendar'></div>
  <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">
    Horizontal Collapsible
  </button>
  <div id="demo" class="collapse in width" style="background-color:yellow;float:right;border:1px solid black;margin-top:-10em;opacity:1;z-index:5000;">
    <div style="padding: 20px; overflow:hidden; width:300px;">
      Here is my content
    </div>
  </div>
</div>