粘性元素到父溢出容器

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