始终在区域内的顶部div

我创建了一个始终位于顶部的div

.visibleDiv, #topLeft { position: fixed; width: 150px; border: solid 1px #e1e1e1; vertical-align: middle; background: #ffdab9; text-align: center; } #topLeft { top: 10px; left: 10px; } 

我这样显示它

 
 Top Left  

但我也有一个叫做容器的div。 我希望topLeft留在该容器的左上角而不是屏幕的左上角。 我对css很陌生，一直在摸索如何实现这样的效果。

所以为了更清楚地解释，我想尝试达到这个效果

 ______________ |Other things| |____________| ________________________________ | TOP LEFT MESSAGE| | |_________________| | | | | | | CONTAINER DIV | | | | | 

当你向下滚动时，我希望topleft在容器选项卡中位于屏幕的左上角，就像这样

 |__________________ | | TOP LEFT MESSAGE| | |_________________| | | | | | | CONTAINER DIV | | | | | |______________________________| 

如果有人能指出我正确的方向或告诉我如何通过解释实现这一点，我将非常感激。 感谢任何人提前帮助或只是阅读这篇文章。

Answer 1

只需添加位置：相对于容器元素。

看到这个小提琴

更新

jQuery在这里非常有用。 您可以使用它轻松计算“容器”何时到达视图端口的顶部，然后将类重新分配给“topLeft”元素以修复它。

HTML

 
 Some Stuff 
 
 
Top Left Stuff
 Container Stuff  

CSS

 .container { background-color:#FAA; height:1000px; } #topLeft { width: 150px; border: solid 1px #e1e1e1; vertical-align: middle; background: #ffdab9; text-align: center; } .fixit { position:fixed; top: 0px; } 

使用Javascript

在这里看到它

Answer 2

这是一个小提琴http://jsfiddle.net/TSfLu/

左上方的消息将始终位于该位置并覆盖其下方的任何内容。 因此，您可能希望相应地在页面上定位内容。