HTML一般布局问题

Question

横幅是我想要它的地方虽然使用jquery砌体的盒子与它重叠，但我在这里做错了什么？...

HTML

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="masonry.js"></script>
<script>
$(function () {
      $('#container').masonry({
          columnWidth: 1,
          itemSelector: 'div'
      });
});
</script>

<div id="banner">
    <img src="images/banner.png"/>
</div>

<div id="logo">
</div>

<div id="imagetrans">
<div id="container" class="clearfix masonry">

<div class="box1"> 
    <img class="bottom" src="images/eventbox2.png"/>
    <img class="top" src="images/eventbox.png"/>
</img></div>

<div class="box2">
    <img class="bottom" src="images/forumbox2.png"/>
    <img class="top" src="images/forumbox.png"/>
</img></div>    

<div class="box1"> 
    <img class="bottom" src="images/eventbox2.png"/>
    <img class="top" src="images/eventbox.png"/>
</img></div>

<div class="box1"> 
    <img class="bottom" src="images/eventbox2.png"/>
    <img class="top" src="images/eventbox.png"/>
</img></div>

<div class="box3">
    <img class="bottom" src="images/top10box2.png"/>
    <img class="top" src="images/top10box.png"/>
</img></div>

<div class="box1"> 
    <img class="bottom" src="images/eventbox2.png"/>
    <img class="top" src="images/eventbox.png"/>
</img></div>
</div>
</div>
</div>

和css

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

有什么想法吗？因为我可以通过从上到下改变编码轻松地将横幅放在底部，虽然我更喜欢它，如果我可以将它放在屏幕的顶部，不太确定什么是错的......

Answer 1

尝试更改：

#banner {
  position: absolute;
  left: 0;
  right: 0;
  top: 0px;
}

要：

#banner {
   height: 100px; // whatever your banner height is.
}

或者：

#banner {
  position: fixed;
  left: 0;
  right: 0;
  top: 0px;
}

如果您采用固定位置方法，则需要添加某种上边距或间隔符，以便将页面内容向下压缩到标题的高度。