我试图在一个可滚动的容器中放置一个固定的“标题”......因此,当您滚动时,标题始终位于顶部......对于某些虚假未知原因,它始终将标题置于实际窗口顶部而不是位置:相对容器。如何对齐相对容器内的css固定元素?
下面是一个例子:
http://jsfiddle.net/1hzpLupq/2/
谁能解释:1)为什么出现这种情况,和2)我如何能实现我的目标是什么?
谢谢。
.outer-container {
height: 500px;
background: blue;
display: block;
}
.offsetinator {
padding-top: 100px;
}
.inner-container {
width: 100%;
}
.container {
position: relative;
background: teal;
overflow: auto;
height: 50px;
width: 100%;
}
.header {
position: fixed;
top: 0;
background: orange;
}
.row {
background: green;
}
.row span {
background: gray;
padding: 0 25px;
}
<div class="outer-container">
<div class="offsetinator">
<div class="inner-container">
<div class="container">
<div class="header">
<div class="row">
<span>thing1</span>
<span>thing2</span>
</div>
</div>
<div class="body">
<div class="row">
<span>foobar 1</span>
<span>foobar 2</span>
</div>
<div class="row">
<span>foobar 1</span>
<span>foobar 2</span>
</div>
<div class="row">
<span>foobar 1</span>
<span>foobar 2</span>
</div>
<div class="row">
<span>foobar 1</span>
<span>foobar 2</span>
</div>
<div class="row">
<span>foobar 1</span>
<span>foobar 2</span>
</div>
<div class="row">
<span>foobar 1</span>
<span>foobar 2</span>
</div>
<div class="row">
<span>foobar 1</span>
<span>foobar 2</span>
</div>
<div class="row">
<span>foobar 1</span>
<span>foobar 2</span>
</div>
<div class="row">
<span>foobar 1</span>
<span>foobar 2</span>
</div>
<div class="row">
<span>foobar 1</span>
<span>foobar 2</span>
</div>
<div class="row">
<span>foobar 1</span>
<span>foobar 2</span>
</div>
<div class="row">
<span>foobar 1</span>
<span>foobar 2</span>
</div>
<div class="row">
<span>foobar 1</span>
<span>foobar 2</span>
</div>
<div class="row">
<span>foobar 1</span>
<span>foobar 2</span>
</div>
<div class="row">
<span>foobar 1</span>
<span>foobar 2</span>
</div>
<div class="row">
<span>foobar 1</span>
<span>foobar 2</span>
</div>
<div class="row">
<span>foobar 1</span>
<span>foobar 2</span>
</div>
<div class="row">
<span>foobar 1</span>
<span>foobar 2</span>
</div>
</div>
</div>
</div>
</div>
</div>
呃..没有?不工作.. – patrick 2014-11-04 18:55:07