位置固定保證金的div

Question

你好

請看看我的jsfiddle。

內部div元素的內容是可滾動的。

每個灰色符號都有一個餘裕。當我滾動內容時，符號不應該固定在背景上。

它應該可以滾動的位置。

你知道我是如何達到這個效果的嗎？

Answer 1

請記住，定位是相對於最接近定位家長。

當你給「symb」類指定一個絕對位置時，你將它們定位在相對於文檔而不是它們的父類。

只需添加「position：relative;」到你的div.tl元素會將父div設置爲定位而不移動它，「symb」元素將按照我認爲你期望的方式進行操作。

您的新.TL的定義應該是：

.tl { 
    width: 500x; 
    height: 80px; 
    background-color:grey; 
    position: relative; 
} 

此外，我假定你有一些需要絕對定位這些。您可以通過簡單地刪除.symb定義中的「position：absolute」部分來獲得類似的結果。

您正在設置保證金，而不是位置，因此您不需要在示例情況下根本就不打算定位。

Answer 2

我不確定你需要什麼。你最後一個「symb」有錯誤 - 你錯過了'px'中的'p'。嘗試這個？

<div class ="outer"> 
    <div class="inner"> 
      <div class="tl"> 
       <div class="box" style="width: 315px;"> 
        <div class="symb" style="margin-left: 0px;"></div> 
        <div class="symb" style="margin-left: 15px;"></div> 
        <div class="symb" style="margin-left: 20px;"></div> 
       </div> 
     </div> 
    </div> 
</div> 

.outer { 
    width:50%; 
} 
.inner { 
    overflow-x:scroll; 
} 
.tl { 
    width: 500x; 
    height: 80px; 
    background-color:grey; 
} 
.box { 
    float: left; 
    height: 61px; 
} 

.box .symb { 
    float:left; 
    width: 5px; 
    height: 5px; 
    background-color: #cccccc; 
    z-index: 999; 
    margin-top: 10px; 
} 

Answer 3

使用

position: relative; 

不

position: absolute; 

只是下面的CSS嘗試：

.box .symb { 
    position: relative; 
    float: left; 
    position: inline-block; 
    width: 5px; 
    height: 5px; 
    background-color: #cccccc; 
    z-index: 999; 
    margin-top: 10px; 
}