粘性元素到父溢出容器

Question

注意：容器的位置必須爲absolute caue我的插件需要這樣做。

<div class = "container"> 
    <div id = "element1"> 
    </div> 
    <div id = "element2"> 
    </div> 
    <div id = "element3"> 
    </div> 
</div> 

---

.container { 
    display: block; 
    overflow-y: scroll; 
    overflow-x: hidden; 

    background-color: yellow; 
} 

#element1 { 
    background-color: red; 
} 
#element2 { 
    background-color: green; 
} 
#element3 { 
    background-color: blue; 
} 

Answer 1

#element3的需求來.container外面移動;但如果你需要的容器這種方式，嘗試...

小提琴：https://jsfiddle.net/rfornal/y3qs8nxv/

<div class="container"> 
    <div class="inner-container"> 
    <div id="element1"></div> 
    <div id="element2"></div> 
    </div> 
    <div id="element3"></div> 
</div> 

嘗試CSS像這樣...

.container { 
    display: block; 
    position: absolute; 
    width: 50%; 
    height: 50%; 
} 

.inner-container { 
    display: block; 
    overflow-y: scroll; 
    overflow-x: hidden; 

    background-color: yellow; 
    position: relative; 
    z-index: 10; 
    width: 100%; 
    height: 100%; 
} 

#element1 { 
    background-color: red; 
    padding: 1em; 
} 
#element2 { 
    background-color: green; 
    padding: 1em; 
} 
#element3 { 
    background-color: blue; 
    position: absolute; 
    right: -2em; 
    bottom: -2em; 
    height: 4em; 
    width: 4em; 
    z-index: 20; 
} 

Answer 2

在您的標記，#element3裏面.container。

但在圖片中#element3在.container之外。

你有兩個選擇：

1. 寫標記，以便#element3超出.container;或
2. 添加JavaScript它選擇#element3，然後移動它之外.container