如何使用css將html div保留在固定位置？

Question

如何保持<div>的固定？

我試過使用style="position:fixed"，但我想保持固定的部分不斷與下面的部分重疊。這裏是我的jsfiddle：

在此先感謝！

Answer 1

它已經修復。您必須爲其設置背景（默認爲透明）。

例子：style="position: fixed; background: white;"

Answer 2

爲什麼你需要的位置是固定的？只需將該位置設爲靜態（默認值）或相對。

<div class="row">

或

<div class="row" style="position:relative;">

JS Fiddle

Answer 3

元素是如果使用位置屬性值作爲固定相對於瀏覽器定位。它是頁面上其他元素的獨立實體。如果你想要select元素在藍條之下，你必須做一些不同的事情。 margin-top的值可以根據需要通過javascript動態設置。

<div style="overflow: hidden"> 
 
<div class="row" style="position: fixed"> 
 
     <div class="col-md-6 col-md-offset-6" align="right"> 
 
      <table class="table" id="cart"> 
 
      <tr> 
 
       <td>Brand</td> 
 
       <td>Description</td> 
 
       <td>Unit Price</td> 
 
       <td>Qty</td> 
 
       <td hidden>ID</td> 
 
       <td></td> 
 
      </tr> 
 
      </table> 
 
      <div align="left"> 
 
      <p id= 'cart_total'>Cart Total:</p> 
 
      <button class="btn btn-success"><a href="/checkout">Checkout</a></button> 
 
      </div> 
 
      <br> 
 
      <br> 
 
     </div> 
 
     <hr style="border: 5px solid #337ab7"> 
 
</div> 
 
    
 
    <div class="container text-center" style="margin-top: 154px;"> 
 
     <h1>Select product category:</h1> 
 
     <select id="product_types"> 
 
      <option selected=""></option> 
 
       <option value="">1</option> 
 
       <option value="">2</option> 
 
       <option value="">3</option> 
 
     </select> 
 
    </div> 
 
</div>