右浮動左浮動？

我有兩個箭頭導航項目，我想左右浮動，它們被絕對定位，並且具有比頁面上所有內容更高的z索引。但我有一個問題。右浮動左浮動？

<div id="slider-nav"> 
<a href="#" id="next"></a> 
<a href="#" id="prev"></a> 
</div>

然後我有我想讓兩個項目向左或向右浮動的CSS。

#next { 
    display: block; 
    width: 8px; 
    height: 12px; 
    background-image:url(images/next.png); 
    z-index: 999; 
    position: absolute; 
    float: right; 
} 

#prev { 
    display: block; 
    width: 8px; 
    height: 12px; 
    background-image:url(images/prev.png); 
    z-index: 999; 
    position: absolute; 
    float: left; 
} 

#slider-nav { 
    width: 100%; 
    height: 12px; 
    position: absolute; 
    z-index: 100; 
}

會發生什麼情況是，應該浮動右的塊最終左浮動在左浮動塊的頂部。我嘗試在浮動元素後面和容器div內添加明確的修復無效。

來源

2013-08-20 Alex Howell

U不能使用float來浮動絕對定位的元素。無論是使用float還是'position：absolute'，或者添加'left：Xpx;'/'right：Xpx;'到你的CSS。 – putvande

是的，你是對的，更進一步的事實是，容器是絕對的意味着沒有必要使a元素成爲絕對的。所以我現在擁有它。 –

您可以通過定位或通過左/右屬性來解決這個問題。在你的CSS代碼中，將位置修改爲相對而不是絕對的。這應該可以解決你的問題。我也改變了內嵌塊旁邊的顯示。

#next { 
     display:inline-block; 
     width: 8px; 
     height: 12px; 
     background-image:url(images/next.png); 
     z-index: 999; 
     position: relative; 
     float: right; 
    } 
    #prev { 
     display: block; 
     width: 8px; 
     height: 12px; 
     background-image:url(images/prev.png); 
     z-index: 999; 
     position: relative; 
     float: left; 
    } 
       #slider-nav { 
       border:1px solid red; 
        height: 12px; 
        width:100%; 
        position: absolute; 
        z-index: 100; 
       }

來源

2013-08-20 17:01:52

我會用左手設置：0像素的右：0像素CSS參數

並把一個體面的寬度一樣80px http://jsfiddle.net/Hfc5r/3/

#next { 
    display: block; 
    width: 80px; 
    height: 12px; 
    background-image:url(images/next.png); 
    z-index: 999; 
    position: absolute; 
    right: 0px; 
} 
#prev { 
    display: block; 
    width: 80px; 
    height: 12px; 
    background-image:url(images/prev.png); 
    z-index: 999; 
    position: absolute; 
    left: 0px; 
} 
#slider-nav { 
    width: 100%; 
    height: 12px; 
    position: absolute; 
    z-index: 100; 
}

來源

2013-08-20 16:41:18 Edorka

位置：絕對和漂浮不會很好地發揮，就像Edorka說的那樣，在絕對位置使用左右。 –

你並不需要浮動的元素，一旦你有他們絕對定位：如果他們是在流

#next { 
      display: block; 
      width: 8px; 
      height: 12px; 
      background-image:url(images/next.png); 
      z-index: 999; 
      position: absolute; 
      right: 0; 
     } 
     #prev { 
      display: block; 
      width: 8px; 
      height: 12px; 
      background-image:url(images/prev.png); 
      z-index: 999; 
      position: absolute; 
      left: 0; 
     }

來源

2013-08-20 16:42:47

元素只能被浮置。絕對定位的元素不在流中，因此不能浮動。嘗試使用left & right替代。

#next { 
    display: block; 
    width: 8px; 
    height: 12px; 
    background-image:url(images/next.png); 
    z-index: 999; 
    position: absolute; 
    right: 0; 
} 

#prev { 
    display: block; 
    width: 8px; 
    height: 12px; 
    background-image:url(images/prev.png); 
    z-index: 999; 
    position: absolute; 
    left: 0; 
}

來源

2013-08-20 16:43:15

使用right:0;和left:0;絕對定位的元素

來源

2013-08-20 16:43:49

你不需要在你的#prev和#next position: absolute;，除非你想讓他們堆上層建築的海誓山盟。

來源

2013-08-20 16:45:12 Marc

我測試了你的代碼，問題是position: absolute;使它浮在整個文檔上。你可以考慮使用類似left: 10px的東西，它會創建類似margin-left: 10px的東西。使用此代碼：如果你想將它漂浮到右

#next { 
     display: block; 
     width: 8px; 
     height: 12px; 
     background-image:url(images/next.png); 
     z-index: 999; 
     position: absolute; 
     float: right; 
    } 
    #prev { 
     display: block; 
     width: 8px; 
     height: 12px; 
     background-image:url(images/prev.png); 
     z-index: 999; 
     position: absolute; 
     right: 30px; 
     float: left; 
    } 
       #slider-nav { 
        width: 100%; 
        height: 12px; 
        position: absolute; 
        z-index: 100; 
       }

，您可以使用此：right: 10px這將使它漂浮在右側只有10px的保證金。

編輯︰我的代碼是使用right: 10px，這意味着它會漂浮在右側。

來源

2013-08-20 16:45:42

右浮動左浮動？

回答

相關問題