css之sticky定位

这篇具有很好参考价值的文章主要介绍了css之sticky定位。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.属性介绍:

sticky定位(粘性定位),指的是基于用户的滚动位置来定位,默认情况下它表现就和relative定位一样,但是当页面滚动区域大于你的目标区域(即sticky对应的元素区域)时,它的表现和fixed定位一样。
元素定位也同样需要根据所设定的top,left,right,bottom来呈现。

2.sticky定位的缺点:

存在兼容性问题
Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要添加-webkit前缀。

3.案例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>sticky</title>
   <style>
        .userList-title{
            padding: 10px;
            background-color: greenyellow;
            position: -webkit-sticky;
            position: sticky;
            top:0;
        }
        .user-list-item{
            padding: 10px;
            background: pink;
        }
        .user-list-item:nth-child(odd){
            background-color: coral;
        }
        .phone{
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="userList-title">用户列表</div>
    <div class="user-list-item">
        <div class="username">张三</div>
        <div class="phone">18989898989</div>
    </div>
    .....此处省略n个列表项
    <div class="user-list-item">
        <div class="username">张三</div>
        <div class="phone">18989898989</div>
    </div>
    
</body>
</html>

css sticky,CSS,css,前端
css sticky,CSS,css,前端文章来源地址https://www.toymoban.com/news/detail-611521.html

到了这里,关于css之sticky定位的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【Web前端开发基础】CSS的定位和装饰

    能够说出 定位 的常见应用场景 能够说出 不同定位方式 的特点 能够使用 子绝父相 完成元素水平垂直案例 能够写出三种常见的 光标类型 (cursor) 能够使用 圆角边框 属性完成 正圆 和 胶囊按钮 效果 能够说出 display 和 visibility 让 元素本身隐藏 的区别 2.1 定位 目标:能够说

    2024年01月23日
    浏览(42)
  • CSS笔记(黑马程序员pink老师前端)定位

    定位可以让盒子自由的在某个盒子内移动位置或者固定在屏幕中某个位置,并且可以压住其他盒子。 定位 = 定位模式 + 边偏移 定位模式 说明 static 静态定位,按标准流特性摆放,没有边偏移,很少用 relative 相对定位,相对自身原有位置移动,原有位置继续占有(不脱标) absolute 绝

    2024年02月09日
    浏览(52)
  • [HTML]Web前端开发技术10(HTML5、CSS3、JavaScript )CSS+DIV页面布局,固定定位,相对定位relative,绝对定位absolute,层定位的应用——喵喵画网页

    希望你开心,希望你健康,希望你幸福,希望你点赞! 最后的最后,关注喵,关注喵,关注喵,佬佬会看到更多有趣的博客哦!!! 喵喵喵,你对我真的很重要! 目录 前言 课后练习 网页标题:固定定位 网页标题:相对定位relative 网页标题:绝对定位absolute 网页标题:层定

    2024年02月02日
    浏览(56)
  • 【后端学前端】第三天 css动画 动态搜索框(定位、动态设置宽度)

    视频地址:css动画 动态搜索框(定位、动态设置宽度)_哔哩哔哩_bilibili 通过对大的容器动态设置宽度按,也就是 这里学到一个注意点:在class后的属性会覆盖先写的属性 searchBar的最早宽度是400px,在后面又新定义了一个searchBar的样式为60px 看教程,i 定义与文本中其余部分不

    2024年02月04日
    浏览(46)
  • [HTML]Web前端开发技术7(HTML5、CSS3、JavaScript )CSS的定位机制——喵喵画网页

    希望你开心,希望你健康,希望你幸福,希望你点赞! 最后的最后,关注喵,关注喵,关注喵,佬佬会看到更多有趣的博客哦!!! 喵喵喵,你对我真的很重要! 目录 前言 CSS的定位机制 文档流定位 元素类型   浮动定位 float的用处 float的特点 clear属性 层定位 position属性

    2024年02月05日
    浏览(69)
  • HTML5+CSS3学习笔记(九)前端页面六大布局(文档流布局、浮动布局、定位布局、表格布局、弹性布局、网格布局)

    本系列更多文章,可以查看专栏 HTML+CSS学习笔记 块级元素自上至下垂直排列,行内元素自左至右水平排列 块级元素独占一行,行内元素不会另起一行 默认情况下,height和width决定内容区的大小;内容区、内边距和边框构成可见区域的大小;外边距决定元素的位置 更多内容可

    2024年02月02日
    浏览(60)
  • CSS绝对定位、相对定位

    目录 静态定位 - static 相对定位 - relative 绝对定位 - absolute 固定定位 - fixed z-index属性: 在CSS中定位有以下4种: 静态定位 - static 相对定位 - relative 绝对定位 - absolute 固定定位 - fixed 静态定位是css中的默认定位方式,也就是没有定位。在此定位方式中设置:top,bottom,left,

    2024年02月02日
    浏览(46)
  • CSS新手入门笔记整理:CSS定位布局

    浮动布局比较灵活,但是不容易控制。而定位布局的出现,使得用户精准定位页面中的任意元素成为可能。当然了,由于定位布局缺乏灵活性,这给空间大小和位置不确定的版面布局带来困惑。因此在实际开发中,大家应该灵活使用这两种布局方式,这样才可以更好地满足开

    2024年02月04日
    浏览(40)
  • css定位详解(相对定位、绝对定位和固定定位)

    css中的position属性,position有四个值:relative(相对定位)、absolute(绝对定位)、static(静态定位)和fixed(固定定位),通过top、left、bottom、right来调整元素位置 属性值 作用 备注 relative 相对定位 参考元素本身 absolute 绝对定位 参考最近的祖先元素 static 静态定位 基本定位

    2023年04月13日
    浏览(32)
  • selenium css定位

    selenium中的css定位,实际是通过css选择器来定位到具体元素,css选择器来自于css语法 语法简洁 对比其他定位方式,定位效率更快 对比其他定位方式,定位更稳定 方法1:在浏览器开发者模式的elements中,Ctrl+F搜索栏输入css表达式 方法2:在浏览器开发者模式的console中,按如下

    2024年02月03日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包