CSS定位與貨運集體

我工作的網站是http://cargocollective.com/amytdatta CSS定位與貨運集體

我試圖定位在貨運環節的運行在頂部導航欄的右側。在我使用的主題中曾經有一個搜索框正好在那裏，所以我隱藏了搜索並嘗試將搜索CSS複製到貨運鏈接CSS。這裏是：

.cargo_link { 
float: right; 
margin: 0 0 0 20px; 
color: #cccccc; 
padding: 0 0 0 25px; 
width: 160px; 
font-family: Helvetica, Arial, sans-serif; 
font-size: 12px; 
line-height: 50px; 
text-align: right; 
border-left: 1px solid #cccccc; 
}

一些擺弄z-index值使貨物鏈接再次可見。

雖然我仍然無法將它放在我想要的位置。下面是搜索框（我已經爲可見現在）的CSS：

#search_form { 
display: inline-block; 
float: right; 
margin: 0 0 0 20px; 
padding: 0; 
} 


#search_form #search_term { 
background: #f5f5f5; 
border-left: 1px solid #cccccc; 
border-top: 0; 
border-bottom: 0; 
border-right: 0; 
color: #999999; 
font-family: Helvetica, Arial, sans-serif; 
font-size: 12px; 
height: 50px; 
line-height: 12px; 
padding: 0 0 0 25px; 
width: 160px; 
}

我基本上希望貨鏈接正是更換搜索框。任何意見將不勝感激！

乾杯。

來源

2012-10-24 Jiver

請不要讓人們對您的頁面進行逆向工程。請發佈相關的HTML。 –

對不起！不幸的是，我使用Cargo Collective，它只是讓我訪問樣式表。 – Jiver

您的#nav_wrapper元素有一個background: whiteSmoke;屬性，該屬性隱藏它下面的任何東西。

您要麼將貨物鏈接放在錯誤的元素中（即不在#nav_wrapper之內，而是在其下面）。或者你不應該有一個背景#nav_wrapper

編輯：

我猜你應該後<div class="page_nav">的結束標記您的<div class="cargo_link">右移

來源

2012-10-24 14:01:18 Rodik

我絕對需要'＃nav_wrapper'來設置背景顏色，以便內容在它下面滾動。 – Jiver

然後將＃nav_wrapper的z-index設置爲更低的值（假設爲50），並使得.cargo_link具有位置：relative和z-index：51 – Rodik

你<div id="nav_wrapper">與position:fixed和z-index:999，這使得貨物鏈接出現在nav_wrapper後面...

來源

2012-10-24 14:05:04 DarkAjax

我試着給Cargo鏈接一個更高的z-index，但仍然不起作用。我希望nav_wrapper始終處於瀏覽器的中間位置。 – Jiver

CSS定位與貨運集體

回答

相關問題