絕對一個可滾動的父母

我想有一個父元素的子元素（像一個工具欄）定位的元素將在其底部邊緣positiond。行爲應該與使用瀏覽器視圖固定的位置相同。絕對一個可滾動的父母

我使用絕對位置現在。在家長需要滾動其內容之前，Everyting是完美的。然後，工具欄隨父母內容的其餘部分一起移動。

有人能解釋我爲什麼在工具欄動作？是否可以在不需要任何JavaScript的情況下完成該任務？

* { 
 
    box-sizing: border-box; 
 
} 
 

 
.container { 
 
    position: relative; 
 
    width: 100px; 
 
    height: 150px; 
 
    overflow-y: auto; 
 
    border: 1px solid black; 
 
} 
 

 
.mock { 
 
    height: 200px; 
 
    background-color: red; 
 
} 
 

 
.tool-bar { 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    height: 40px; 
 
    background-color: blue; 
 
}

<div class="container"> 
 
    <div class="mock"></div> 
 
    <div class="tool-bar"></div> 
 
</div>

來源

2016-01-28 Behnil

使用位置是：固定 –

但具有固定位置元件相對於視口的 – Behnil

'工具bar'定位總是_initially_被定位在容器的底部，按照CSS的規定。但是由於容器由於冗長的內容而可滾動，因此工具欄會將_initial_相對位置保持到視口，這就是爲什麼它可以滾動。使用'位置：fix'保持它在底部如果u希望 –

該工具欄的滾動區域內，這就是爲什麼它滾動。嘗試這種代碼：

HTML

<div class="container"> 
    <div class="scroll"> 
    <div class="mock"></div> 
    </div> 

    <div class="tool-bar"></div> 
</div>

CSS

div.scroll { /* style of .container to scroll */ }

來源

2016-01-28 13:05:26 djl

，我發現了一個有趣的小提琴，可以幫助你。他們使用的位置是：固定和的div沒有嵌套：

http://jsfiddle.net/b2jz1yvr/

<div class="fixedContainer"> 
    This is experimental 
</div> 
<div class="otherContainer"></div> 

.fixedContainer { 
    background-color:#ddd; 
    position: fixed; 
    padding: 2em; 
    left: 50%; 
    top: 0%; 
    transform: translateX(-50%); 
} 

.otherContainer { 
    height:1000px; 
    background-color:#bbb 
}

來源

2016-01-28 13:05:23 Damiano

絕對一個可滾動的父母

回答

相關問題