css 浮动与定位【小案例】-- sticky 图片堆叠

Vvc_b

于 2024-10-19 16:08:09 发布

阅读量393

点赞数 9

分类专栏： CSS 文章标签： css 前端

本文链接：https://blog.youkuaiyun.com/m0_74897683/article/details/143079730

版权

CSS 专栏收录该内容

10 篇文章

订阅专栏

说明！：

本案例因为兼容性的问题，建议在Chrome浏览器，其他浏览器可能没效果哦，这个效果现在一般使用JavaScript实现 ~~

效果展示：

2024-10-19 15-52-47

代码展示：

<style>
    *{
        margin: 0;
        padding: 0;
    }
    div{
        position: sticky;
        top: 0;
    }
</style>
<body>
    <div><img src="images/39.jpg" alt="" width="700px"></div>
    <div><img src="images/40.jpg" alt="" width="700px"></div>
    <div><img src="images/41.jpg" alt="" width="700px"></div>
    <div><img src="images/42.jpg" alt="" width="700px"></div>
    <div><img src="images/43.jpg" alt="" width="700px"></div>
    <div><img src="images/44.jpg" alt="" width="700px"></div>
    <div><img src="images/46.jpg" alt="" width="700px"></div>