DIV uden overlap

Heisa... Jeg vil gerne have class="active" til altid at være i venstre top hjørne af container.

Og class="boxe" skal flyde rundt om class="active".. men jeg kan ikke rigtigt få det til at virke, jeg har følgende:

    <div class="container">
<div class="active boxe" >1 tester</div>
<div class="boxe" >2 tester</div>
<div class="boxe" >3 tester</div>
<div class="boxe" >4 tester</div>
<div class="boxe" >5 tester</div>
<div class="boxe" >6 tester</div>
<div class="boxe" >7 tester</div>
<div class="boxe" >8 tester</div>
<div class="boxe" >9 tester</div>
<div class="boxe" >10 tester</div>

</div>

<style>
.container {
  width: 95%;
  margin: 0px auto 0px auto
}

.boxe{
  width: 95px;
  height: 95px;
  cursor: pointer;
  background-color: #333;
  overflow: auto;
  margin: 5px;
  border: #666 solid 1px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  float: left;
}

.active {
position: fixed;
display: block;
  z-index: 100;
  opacity: 0.6;
  width: 310px;
  height: 310px;
  text-align: center;
  font-size: 18px;
  background-color: blue;
}
</style>
<script>
  $('.container .boxe').click(function(){
  $('.boxe').removeClass('active');
  $(this).addClass('active');
  });
</script>

Er der nogle bud ...