绝对定位与inset

最新推荐文章于 2026-04-12 18:05:24 发布

原创最新推荐文章于 2026-04-12 18:05:24 发布 · 3.8k 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

css

本文介绍了如何通过CSS布局，使屏幕中间的滚动区域在滚动时，猫猫图片能够随之滚动。关键在于使用`inset`属性进行绝对定位，并通过调整`overflow`属性实现滚动效果。当`inset: 0;`时，元素紧贴浏览器窗口，而`inset: 100px;`则会使元素与窗口保持一定距离。代码示例展示了具体的实现方式。

实现一种这样的布局：屏幕中间有一块滚动区域，滚动滚动条时，里面的猫猫图片会随之滚动。

滚动条滚动一点时：
在这里插入图片描述
继续滚动滚动条，把猫猫图片展示在中间区域：

代码：


<style>
    body {
        background-color: antiquewhite;
    }
    .contain {
        position: absolute;
        inset: 100px;
        overflow: auto;
        background-color: #000;
    }
    .fa {
        width: 3440px;
        height: 2960px;
        padding: 1000px;
    } 
    .son {
        width: 1440px;
        height: 960px;
        background-image: url(https://blog.csdn.net/'../img/1.jpg');
    }
</style>

<div class="contain">
	<div class="fa">
		<div class="son"></div>
	</div>
</div>

定位以后，inset属性才有效。
inset：100px；意思是当前定位元素相对于最近定位的祖先元素的位置。因为这个例子中没有定位的祖先元素，所以相对于html进行定位，那么当前元素距离浏览器窗口的 “距离” （不是外边距）为100px。也就是说当inset：0; 时，当前元素是紧贴着浏览器窗口的。

（1）inset: 0;时，contain元素紧贴浏览器窗口。contain元素要绝对定位哦
在这里插入图片描述
效果图：

（2）inset: 100px;时：