Html 向下滚动时固定标题上方显示的图像和文本

我不熟悉HTML和CSS 我试图创建一个基于电子商务的页面。 我的页眉是固定的，但当我向下滚动页面时，页面上的图像溢出。 如果我的方法创建网站是奇怪的，请指导我或提到我采取新的方式来做它。 截图在这里

这是我的代码附在后

*{
保证金：0；
填充：0；
}
#标题{
宽度：100%；
高度：60px；
背景色：#090；
位置：固定；
}
#包装纸{
宽度：80%；
背景色：#F7F4；
保证金：自动；
}
#main1{
宽度：100%；
背景色：#FF6；
}
#main 1：：之后{
内容：“；
显示：块；
明确：两者皆有；
}
#左边{
宽度：20%；
高度：300px；
背景色：#0FF；
浮动：左；
}
#中间的{
宽度：60%；
高度：300px；
背景色：#00F；
浮动：左；
颜色：白色；
}
#右侧{
宽度：20%；
高度：300px；
背景色：#636；
浮动：对；
}
#特别折扣{
宽度：100%；
背景色：#FF6；
}
#特别折扣：：之后{
内容：“；
显示：块；
明确：两者皆有；
}
#sp_dis_左侧{
宽度：20%；
高度：300px；
背景色：#0FF；
浮动：左；
}
#sp_dis_middle{
宽度：60%；
高度：300px；
背景色：#00F；
浮动：左；
颜色：白色；
}
#sp_dis_右侧{
宽度：20%；
高度：300px；
背景色：#636；
浮动：对；
}
#时事通讯{
背景：#C1282B；
宽度：100%；
高度：80px；
}
#推荐{
宽度：100%；
背景色：#FF6；
}
#推荐：：之后{
内容：“；
显示：块；
明确：两者皆有；
}
#建议左侧{
宽度：20%；
高度：300px；
背景色：#0FF；
浮动：左；
}
#建议右侧{
宽度：80%；
高度：300px；
背景色：#636；
浮动：对；
颜色：白色；
}
#ads1{
背景：#C1282B；
宽度：100%；
高度：80px；
颜色：白色；
}
#类别1{
宽度：100%；
背景色：#FF6；
}
#类别1：：之后{
内容：“；
显示：块；
明确：两者皆有；
}
#cat1_左侧{
宽度：20%；
高度：350px；
背景色：#0FF；
浮动：左；
}
#cat1_右侧{
宽度：80%；
高度：350px；
背景色：#636；
浮动：对；
颜色：白色；
}
#家用1类1盒1{
宽度：180px；
位置：绝对位置；
显示：内联；
高度：350px；
}
#家庭用品类别1盒2{
宽度：390px；
位置：绝对位置；
显示：内联；
高度：350px；
左边距：200px；
}
#家庭用品类别1盒3{
宽度：390px；
位置：绝对位置；
显示：内联；
高度：350px；
左边距：577px；
}
#全球广告{
背景：#C1282B；
宽度：100%；
高度：80px；
颜色：白色；
}
#类别2{
宽度：100%；
背景色：#FF6；
}
#类别2：：之后{
内容：“；
显示：块；
明确：两者皆有；
}
#cat2_左侧{
宽度：20%；
高度：300px；
背景色：#0FF；
浮动：左；
}
#cat2_右侧{
宽度：80%；
高度：300px；
背景色：#636；
浮动：对；
颜色：白色；
}
#ads2{
背景：#C1282B；
宽度：100%；
高度：80px；
颜色：白色；
}
#类别3{
宽度：100%；
背景色：#FF6；
}
#类别3：：之后{
内容：“；
显示：块；
明确：两者皆有；
}
#cat3_左侧{
宽度：20%；
高度：300px；
背景色：#0FF；
浮动：左；
}
#cat3_右侧{
宽度：80%；
高度：300px；
背景色：#636；
浮动：对；
颜色：白色；
}
#类别4{
宽度：100%；
背景色：#FF6；
}
#类别4：：之后{
内容：“；
显示：块；
明确：两者皆有；
}
#cat4_左侧{
宽度：20%；
高度：300px；
背景色：#0FF；
浮动：左；
}
#cat4_右侧{
宽度：80%；
高度：300px；
背景色：#636；
浮动：对；
颜色：白色；
}
#ads3{
背景：#C1282B；
宽度：100%；
高度：80px；
颜色：白色；
}
#类别5{
宽度：100%；
背景色：#FF6；
}
#类别5：：之后{
内容：“；
显示：块；
明确：两者皆有；
}
#cat5_左侧{
宽度：20%；
高度：300px；
背景色：#0FF；
浮动：左；
}
#cat5_右侧{
宽度：80%；
高度：300px；
背景色：#636；
浮动：对；
颜色：白色；
}
#类别6{
宽度：100%；
背景色：#FF6；
}
#类别6：：之后{
内容：“；
显示：块；
明确：两者皆有；
}
#cat6_左侧{
宽度：20%；
高度：300px；
背景色：#0FF；
浮动：左；
}
#cat6_右侧{
宽度：80%；
高度：300px；
背景色：#636；
浮动：对；
颜色：白色；
}
#ads4{
背景：#C1282B；
宽度：100%；
高度：80px；
颜色：白色；
}
#类别7{
宽度：100%；
背景色：#FF6；
}
#类别7：：之后{
内容：“；
显示：块；
明确：两者皆有；
}
#cat7_左侧{
宽度：20%；
高度：300px；
背景色：#0FF；
浮动：左；
}
#cat7_右侧{
宽度：80%；
高度：300px；
背景色：#636；
浮动：对；
颜色：白色；
}
#类别8{
宽度：100%；
背景色：#FF6；
}
#类别8：：之后{
内容：“；
显示：块；
明确：两者皆有；
}
#cat8_左侧{
宽度：20%；
高度：300px；
背景色：#0FF；
浮动：左；
}
#cat8_右侧{
宽度：80%；
高度：300px；
背景色：#636；
浮动：对；
颜色：白色；
}
#ads5{
背景：#C1282B；
宽度：100%；
高度：80px；
颜色：白色；
}
#类别9{
宽度：100%；
背景色：#FF6；
}
#类别9：：之后{
内容：“；
显示：块；
明确：两者皆有；
}
#cat9_左侧{
宽度：20%；
高度：300px；
背景色：#0FF；
浮动：左；
}
#cat9_右侧{
宽度：80%；
高度：300px；
背景色：#636；
浮动：对；
颜色：白色；
}
#类别10{
宽度：100%；
背景色：#FF6；
}
#类别10：：之后{
内容：“；
显示：块；
明确：两者皆有；
}
#cat10_左侧{
宽度：20%；
高度：300px；
背景色：#0FF；
浮动：左；
}
#cat10_右侧{
宽度：80%；
高度：300px；
背景色：#636；
浮动：对；
颜色：白色；
}
#页脚{
宽度：100%；
高度：100px；
背景
z-index: 99 !important;

#header {
width: 100%;
height: 60px;
background-color: #090;
position: fixed;
z-index: 99 !important;
}

#header {
  width: 100%;
  height: 60px;
  background-color: #090;
  position: fixed;
  z-index: 100; // add it here and set it to a reasonable value
}