The banner is where i want it to be although the boxes which are using jquery masonry are overlapping it, what have i done wrong here?...html\[code\]<script type="text/javascript" src="http://stackoverflow.com/questions/15750062/jquery.js"></script><script type="text/javascript" src="http://stackoverflow.com/questions/15750062/masonry.js"></script><script>$(function () { $('#container').masonry({ columnWidth: 1, itemSelector: 'div' });});</script><div id="banner"> <img src="http://stackoverflow.com/questions/15750062/images/banner.png"/></div><div id="logo"></div><div id="imagetrans"><div id="container" class="clearfix masonry"><div class="box1"> <img class="bottom" src="http://stackoverflow.com/questions/15750062/images/eventbox2.png"/> <img class="top" src="http://stackoverflow.com/questions/15750062/images/eventbox.png"/></img></div><div class="box2"> <img class="bottom" src="http://stackoverflow.com/questions/15750062/images/forumbox2.png"/> <img class="top" src="http://stackoverflow.com/questions/15750062/images/forumbox.png"/></img></div> <div class="box1"> <img class="bottom" src="http://stackoverflow.com/questions/15750062/images/eventbox2.png"/> <img class="top" src="http://stackoverflow.com/questions/15750062/images/eventbox.png"/></img></div><div class="box1"> <img class="bottom" src="http://stackoverflow.com/questions/15750062/images/eventbox2.png"/> <img class="top" src="http://stackoverflow.com/questions/15750062/images/eventbox.png"/></img></div><div class="box3"> <img class="bottom" src="http://stackoverflow.com/questions/15750062/images/top10box2.png"/> <img class="top" src="http://stackoverflow.com/questions/15750062/images/top10box.png"/></img></div><div class="box1"> <img class="bottom" src="http://stackoverflow.com/questions/15750062/images/eventbox2.png"/> <img class="top" src="http://stackoverflow.com/questions/15750062/images/eventbox.png"/></img></div></div></div></div>\[/code\]and the css\[code\]body { width:900px; height:100%; margin:0 auto; background-image: url(images/gridbg.png);}#banner { position: absolute; left: 0; right: 0; top: 0px;}#container > div { margin: 5px;}.box1 { width:350px; height:250px;}.box2 { width:150px; height:150px;}.box3 { width:150px; height:350px;}#imagetrans { position:relative; margin:0 auto;}#imagetrans img.top:hover,#container > div img.top:hover { opacity:0;}#imagetrans img,#container > div img { position:absolute; -webkit-transition: opacity 0.3s ease-in-out; -moz-transition: opacity 0.3s ease-in-out; -o-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out;}\[/code\]Any ideas? cause i can easily place the banner at the bottom by changing the coding from top to bottom, although i would prefer it if i could have it at the top of the screen, not quite sure whats wrong...
