Question

我的容器中有一个标题部分，其中包含位置：绝对使用z-index的元素。下面我有2列，但它们显示在徽标后面的顶部而不是标题div下方。我尝试了绝对和相对定位以及顶部和边缘，但没有什么对我有用。

CSS -

.cont { width:100%; max-width:950px; position:relative; margin:0 auto; font-family:Arial, Helvetica, san serif; font-size:small; color:#555; text-align:left; }
*/ HEADER */
.hdr { width:100%; max-width:950px; position:relative; margin:0 auto; font-family:Arial, Helvetica, san serif; font-size:8em; color:#555; text-align:left; }
.hdrlogo { position:absolute; top:10px; left:20px; z-index:25; }
.hdrbgbar { position:absolute; top:105px; left:0; z-index:10; }
.hdrnavbar { position:absolute; top:80px; left:20px; z-index:15; }
.hdrother { }
.navallitems { position:absolute;  font-family:Arial, Helvetica, san serif; font-size:11px; top:95px; left:40px; z-index:30; color:#555; } 
.navartprints { position:absolute;  font-family:Arial, Helvetica, san serif; font-size:11px; top:95px; left:135px; z-index:30; color:#555; } 
.navjudaic { position:absolute;  font-family:Arial, Helvetica, san serif; font-size:11px; top:95px; left:305px; z-index:30; color:#555; } 
.navoilpaintings { position:absolute;  font-family:Arial, Helvetica, san serif; font-size:11px; top:95px; left:462px; z-index:30; color:#555; } 
.navcollections { position:absolute;  font-family:Arial, Helvetica, san serif; font-size:11px; top:95px; left:575px; z-index:30; color:#555; } 
.navwhatsnew { position:absolute;  font-family:Arial, Helvetica, san serif; font-size:11px; top:95px; left:687px; z-index:30; color:#555; } 
.navnewsletter { position:absolute;  font-family:Arial, Helvetica, san serif; font-size:11px; top:95px; left:815px; z-index:30; color:#555; } 
.topnav { position:absolute;  font-family:Arial, Helvetica, san serif; font-size:11px; top:35px; left:300px; z-index:30; color:#555; padding-right:50px;} 

*/ L-R COLUMNS */
.columns { position:relative; top:130px; }
.cola { float:left; position:relative; width:25%; background:#ff0; margin:0 2% 0 2%; }
.colb { float:left; position:relative; width:65%; background:#f00; margin:0 2% 0 2%; }


*/ HEADER MOBILE */
@media only screen and (max-width: 940px) {
.cont { width:100%; font-size:1em; } 
.hdrlogo {position:relative; margin:0 auto; }
.hdrbgbar { position:absolute; margin:0 auto; top:75px; width:100%; max-width:940px; }
.hdrnavbar { display:none; }
.hdrother { display:none; }
.navallitems { display:none; }
.navartprints { display:none; }
.navjudaic { display:none; }
.navoilpaintings { display:none; }
.navcollections { display:none; }
.navwhatsnew { display:none; }
.navnewsletter { display:none; }
.topnav { display:none; }
}

#alinks a {
font-family: Arial, Helvetica, san-serif;
color: #555;
text-decoration: none;
}
#alinks a:visited {
color: #555;
text-decoration: none;
}
#alinks a:hover {
color: #930;
text-decoration: none;
}
#alinks a:active {
color: #930;
text-decoration: none;
}

HTML -

<div class="cont">
  <div class="hdr"><img src="logo.png" width="231" height="78" class="hdrlogo">
<div class="hdrother"><img src="navbar.png" width="898" height="48" class="hdrnavbar"> </div><img src="hdrbgbar.png" class="hdrbgbar">
    <div class="topnav" id="alinks"> <a href="http://stores.ebay.com/ArtCatalogOnline" target="_blank">Home</a><span style=" padding-right:50px;"></span> 
      <a href="http://www.ebay.com/usr/artcatalogonline" target="_blank">About 
      Us</a><span style=" padding-right:50px;"></span> <a href="http://feedback.ebay.com/ws/eBayISAPI.dll?ViewFeedback&amp;userid=ArtCatalogOnline" target="_blank">Feedback</a><span style=" padding-right:50px;"></span> 
      <a href="http://stores.ebay.com/ArtCatalogOnline/Store-Policies/" target="_blank">Policies</a><span style=" padding-right:50px;"></span> 
      <a href="http://stores.ebay.com/artcatalogonline/pages/frequently-asked-questions/" target="_blank">FAQ</a><span style=" padding-right:50px;"></span> 
      <a href="http://contact.ebay.com/ws/eBayISAPI.dll?ContactUserNextGen&amp;recipient=ArtCatalogOnline" target="_blank">Contact 
      Us</a><span style=" padding-right:50px;"></span> </div>
    <span class="navallitems" id="alinks"><a href="http://stores.ebay.com/ArtCatalogOnline/_i.html?_sasi=1&_sc=1&_sop=10" target="_blank">ALL 
    ITEMS</a></span> <span class="navartprints" id="alinks"><a href="http://stores.ebay.com/ArtCatalogOnline_Art-Prints-Posters_W0QQfsubZ3242825010" target="_blank">ART 
    PRINTS & POSTERS</a></span> <span class="navjudaic" id="alinks"><a href="http://stores.ebay.com/ArtCatalogOnline/_i.html?_fsub=7" target="_blank">JUDAIC 
    & ISRAELI ART</a></span> <span class="navoilpaintings" id="alinks"><a href="http://stores.ebay.com/ArtCatalogOnline_Oil-Paintings_W0QQfsubZ12" target="_blank">OIL 
    PAINTINGS</a></span> <span class="navcollections" id="alinks"><a href="http://stores.ebay.com/ArtCatalogOnline_Collections_W0QQfsubZ2903836010" target="_blank">COLLECTIONS</a></span> 
    <span class="navwhatsnew" id="alinks"><a href="http://stores.ebay.com/ArtCatalogOnline_Best-Sellers_W0QQfsubZ3242824010" target="_blank">WHAT'S 
    NEW</a></span> <span class="navnewsletter" id="alinks"><a href="http://my.ebay.com/ws/eBayISAPI.dll?AcceptSavedSeller&linkname=includenewsletter&sellerid=ArtCatalogOnline">NEWSLETTER</a></span> 
  </div>
<div class="columns">
<div class="cola">
xxx
</div>
<div class="colb">
xxx
</div>
</div>
</div>

Answer 1

错误在于css定位，请查看已审核的代码;

* / L-R COLUMNS * /

.columns { position:absolute;  } 
.cola { width:20%; position:relative; top:130px; background:#ff0; float:left; margin:0 2% 0 2%; }
.colb { float:left; position:relative; top:130px; width:65%; background:#f00; margin:0 2% 0 2%; }

内容部分应低于标题，位于顶部

1 个答案: