神奇的position:relative;

最新推荐文章于 2025-05-26 23:45:15 发布

转载最新推荐文章于 2025-05-26 23:45:15 发布 · 320 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/defims/archive/2011/07/17/2946703.html

本文通过示例解释了在网页布局中如何使用相对定位(position:relative)使元素随滚动条移动，对比了静态定位(static)和固定定位(fixed)的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我承认我又标题党了，这里想说的是相对定位的设置有时候会起决定性的作用，比如在是否随滚动条移动时的控制。先上两个示例： position:static;

我定住了

移动滚动条看看~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

position:relative:

我动了

移动滚动条看看~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

设置了position:relative后，.fixed元素就是相对父框定位了，如果移动滚动条，父框也就移动了，.fixed元素相对父框也就移动了，如果没设置，即使用默认的position:static则会继续往上寻找非position:static的元素，移动滚动条，只有父元素移动，其非position:static的祖先元素没有移动，所以.fixed元素也就定住了。而最近一步的是使用position:fixed，相对于浏览器窗口定位。

转载于:https://www.cnblogs.com/defims/archive/2011/07/17/2946703.html