內容部分應位於標題下方，位於頂部

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