與jQuery滑塊的css餘量問題

Question

我遇到了一個問題，我已經嵌入到我的旋轉木馬中的背景圖像。 click here我注意到當我從一張幻燈片點擊到另一張幻燈片時，我的網站上的背景圖片移動了。我的旋轉木馬的邊緣頂部當前設置爲margin-top:-275px;，背景圖像設置爲margin-top:-64px;我對這些設置略爲擔憂。

有沒有人有解決這個問題的辦法？

爲了激活幻燈片點擊導航欄

Answer 1

下的薄紅標籤我想這是因爲你有

.rslides li { 
    top:0; 
} 

當然這並不能與position:relative（和當前幻燈片有它），但它會通過position:absolute（隱藏幻燈片）向下滑動。

當您單擊一個選項卡時，有一個新的淡入淡出的時刻，但它還沒有position:relative。然後，在那一刻，新的幻燈片不在你想要的地方。

因此刪除該行。

Answer 2

跳轉發生是因爲您在動畫切換結束時將LI項目從position: absolute;切換爲position: relative;。這樣就可以消除你的CSS規則來避免：

.rslides li { left: 0; top: 0; }

指定width和height是好的，但只要你指定left和top - 然後相對於絕對定位切換，你會得到跳躍你」重新看。

至於每個面板的位置 - 它與你的佈局方式有關。您指定的尺寸對於您提供的內容來說不夠大。例如：<div id="header">爲37px高，這是社交媒體按鈕的合適大小，但您也可以將它作爲#nav-menuUL的容器 - 這是另一個102px高。

看起來，爲了糾正這種情況，使事情重疊，你正在使用負邊距 - 這是讓你全部拋出。

我的建議是使用一個標準化的佈局系統，如下列任何一項：

• http://cssgrid.net/
• http://960.gs/
• http://www.1kbgrid.com/
• http://foundation.zurb.com/docs/grid.php

並使用它執行您的佈局任務，而不是tryi具有混合絕對/相對定位的自裝飾重疊層。

另外，如果你打算去重疊層路線（再次，不建議），真的承諾它。在整個佈局中絕對定位事物。

爲了做到這一點，你可能會考慮像CSS規則：

#header { 
    display: block; 
    position: absolute; 

    left: 50%; top: 0px; 
    height: 139px; /* Your Social media links height + nav buttons height */ 
    width: 1018px; /* Your current width */ 
    margin-left: -509px; /* Half the width - centers on page */ 
} 

再次 - 這是更多的工作，更難維護和更優雅的 - 但會產生你至少一致的間距/大小。