如何將菜單項放置在傳送帶頂部的固定位置？

我正在使用wt-rotator carousel插件與bootstrap。我必須在左上角的傳送帶頂部放置一個菜單，位置固定。即使圖像淡入淡出，菜單也應該保持在那裏。有沒有辦法使用CSS來做到這一點？如何將菜單項放置在傳送帶頂部的固定位置？

編輯：添加下面的代碼。到目前爲止只是下面的代碼。它是一個bootstrap jumbotron，裏面有一個wt-rotator轉盤。在這個旋轉木馬之上，我必須放置一個菜單。

<div class="jumbotron"> 
    <div class="container">  
     <div id="banner-container"> 

      <div class="wt-rotator"> 
       <div class="c-panel">    
        <div class="thumbnails"> 
         <ul> 
          <li> 
           <a href="images/image1.jpg"></a> 
          </li> 
          <li> 
           <a href="images/image2.jpg"></a> 
          </li> 
          <li> 
           <a href="images/image3.jpg"></a> 
          </li> 
          <li> 
           <a href="images/image4.jpg"></a> 
          </li> 
         </ul> 
        </div> 

        <div class="buttons"> 
         <div class="prev-btn"></div> 
         <div class="play-btn"></div> 
         <div class="next-btn"></div> 
        </div> 

       </div> 
      </div> 
     </div> 
    </div>

來源

2015-11-23 user187809

你可以添加代碼片段到目前爲止你所嘗試過的嗎？ –

一個例子肯定會幫助我們理解你的問題......因爲它現在正好，所以你需要做的就是添加一個單獨的div，並在你的CSS中，將該div設置爲'position：fixed;'。這樣，你的div（或在這種情況下，你的菜單）將被固定，並且不在你的carousel插件之外。 – Michael

發佈的HTML，我其實沒有任何CSS，因爲我只是使用了bootstrap和wt-rotator – user187809

您可以使用絕對位置和z-index優於滑塊的外部div，並將該div放在滑塊前面。

來源

2015-11-23 19:14:26

的默認CSS類，沒問題，這很奏效，謝謝。這是在電話上搞砸了，因爲我把位置絕對:(在電腦上它看起來不錯。是否有任何技巧使它在電話上工作？ – user187809

你可以展示這個例子，我可以測試嗎？你需要使用％上的位置，而不是px。也許這是工作 –

如何將菜單項放置在傳送帶頂部的固定位置？

回答

相關問題