Question

我有一个大div,里面有很多个小div,大div设置了滚动条，我想第一个小div不受滚动条影响,始终显示.

蓝色部分想固定始终显示

Answer 1

设置滚动条的话只要是div内部的内容都会随着滚动条而移动；所以你想内容不受影响，那么就让它不要在div里面不就行了？比如设置绝对定位让div移动到位置，又或者是这个小div本来是与大div是同级的，你设置负值的外边距margin-bottom:-30px;就可以移动到下面去

追问

设置在大div外面我了解，主要是想知道有没有这个解决方法，新手上路，谢谢指教了。

追答

给你写了2个例子，你应该能理解的
例1：

内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容

例2：

内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容

追问

例2是我想要的效果，能不能详细解释一下之中position:的意义呢，麻烦了~

Answer 2

可以实现的。稍微以下代码即可。
<div style="position:absolute;z-index:100;background:#eeeeee;margin-top:1px;">
固定不动的内容在此
</div>

<div style="overflow:scroll;width:200px;height:200px;border:1px solid red;position:absolute;z-index:1;padding-top:10px;">

<div style="width:100px;">
ggggggggg<br/>gggggggg<br/>gggggg<br/>ggggg<br/>gggggg<br/>ggggg<br/>gggggggg< br/>ggggggg<br/>ggggggg<br/>ggggggggg<br/>gggggsda<br/>fgsdfsdfsdfsdfsd </div>
</div>

</div>

追问

很感谢的你回答，也达到了我想要的效果，我想问一下，使用position:absolute这个绝对位置，不是不能用margin属性吗？

追答

用absolute，如果用TOP,LEFT 属性时，的确不能与margin等属性共用。
但此处，没有TOP,LEFT，margin是可用的。

关键：此处的ABSOLUTE 存在是为了让Z-INDEX属性起作用,而非为了定位。

Answer 3

<div style="position:relative;">
<div style="position:absolute; z-index:99; left:0; background:blue; width:100px;">固定内容</div>
<div style="overflow:scroll; width:200px; height:200px;">下<br />方<br />随<br />滚<br />动<br />条<br />滚<br />动<br />的<br />内<br />容</div>
</div>

Answer 4

<div style="position:absolute;z-index:100;background:#eeeeee;margin-top:1px;">
固定不动的内容在此
</div>

<div style="overflow:scroll;width:200px;height:200px;border:1px solid red;position:absolute;z-index:1;padding-top:10px;">

<div style="width:100px;">
ggggggggg<br/>gggggggg<br/>gggggg<br/>ggggg<br/>gggggg<br/>ggggg<br/>gggggggg< br/>ggggggg<br/>ggggggg<br/>ggggggggg<br/>gggggsda<br/>fgsdfsdfsdfsdfsd </div>
</div>

</div>

Answer 5

改第一个小div的CSS样式
{position: fixed;}