今天在做css定位的时候遇到一个问题，我想用fixed定位下来，但是发现这个时候定义的百分百宽度不随着父元素走了而是整个屏幕的百分百，这个就很尴尬了，也不能固定宽度吧，毕竟还要宽度自适应。

这个时候发现了一个position的属性 ----- sticky

它是relative和fixed的结合体可以理解为，当我们屏幕还没有滚动出原有的范围的时候就跟relative一样，正常排列在那里，当我们屏幕滚动出去了这个时候就fixed，常用语头部或者底部一个吸顶的行为，最最关键的是，他不会像fixed一样把他的父级变成浏览器可视区域，还是你的父级

css定位 position：sticky的更多相关文章

  1. Float浮动、 CSS定位(position)

    Float浮动. CSS定位(position)1.CSS定位机制(1)普通流(标准流)-默认状态,元素自动从左往右,从上往下的排列(2)浮动-会使元素向左或向右移动,只能左右,不能上下-浮动元素碰到 ...

  2. div+css定位position详解

    div+css定位position详解 1.div+css中的定位position 最主要的两个属性:属性 absolute(绝对定位) relative(相对定位),有他们才造就了div+css布局 ...

  3. 《css定位 position》课程笔记

    这是我学习课程css定位 position时做的笔记! 本节内容 html的三种布局方式 position可选参数 z-index 盒子模型和定位的区别 侧边栏导航跟随实例 html的三种布局方式 三 ...

  4. CSS使用position:sticky 实现粘性布局

    简介 前面写了一篇文章讲解了position常用的几个属性:<CSS 属性之 position讲解>一般都知道下面几个常用的: { position: static; position: ...

  5. web前端css定位position和浮动float

    最近做了几个项目:配资公司,ecmal商城等,客户对前台要求都很高.所以,今天来谈谈css的基础,以及核心,定位问题. div.h1或p元素常常被称为块级元素.这意味着这些元素显示为一块内容,即“块框 ...

  6. Div+CSS 定位 Position

    position 属性规定应用于元素的定位方法的类型(static.relative.fixed.absolute 或 sticky). position: static;HTML 元素默认情况下的定 ...

  7. css定位position认识

    1.绝对定位(position: absolute) 2.相对定位(position: relative) 3.固定定位(position: fixed) 绝对定位 设置position:absolu ...

  8. css定位position属性深究

    1.static:对象遵循常规流.此时4个定位偏移属性不会被应用. 2.relative:对象遵循常规流,并且参照自身在常规流中的位置通过top,right,bottom,left这4个定位偏移属性进 ...

  9. CSS定位position

    position选项来定义元素的定位属性,选项有5个可选值:static.relative.absolute.fixed.inherit 属性值为relative.absolute.fixed时top ...

  10. css 定位position总结

    在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...

随机推荐

  1. WEB服务与NGINX（3）-NGINX基础及配置文件

    WEB服务与NGINX(3)-NGINX基础及配置文件 目录 WEB服务与NGINX(3)-NGINX基础及配置文件 1. NGINX初识与安装 1.1 NGINX特性 1.2 NGINX功能和应用场 ...

  2. Mark Lee：Splashtop 如何成为最新的 10 亿美元估值技术独角兽

    从左至右:Splashtop联合创始人Rob.Philip.Mark和Thomas Splashtop 刚刚完成了由我们的长期投资者 Sapphire Ventures 领投的 5000 万美元的新融 ...

  3. 5款.NET开源、免费、功能强大的图表库

    LiveCharts2 LiveCharts2是一个.NET开源(MIT License).简单.灵活.交互式且功能强大的.NET图表.地图和仪表,现在几乎可以在任何地方运行如:Maui.Uno Pl ...

  4. Python闭包和装饰器原理

    # Python闭包和装饰器 ############# 闭包 ############## ''' 1. 一个外层函数,内嵌一个内层函数: 2. 内层函数使用外层函数的参数: 3. 外层函数将内层函 ...

  5. Android 13 - Media框架（16）- OpenMax（四）

    关注公众号免费阅读全文,进入音视频开发技术分享群! 这一节继续了解 openmax 目录下的内容. 1.OMX_Core.h 1.1.OMX_BUFFERHEADERTYPE 这是一个比较关键的结构体 ...

  6. WPF 中使用附加属性解决 PasswordBox 的数据绑定问题

    1.前言 在 WPF 开发中 View 中的数据展示我们常通过 Binding 进行绑定.但是,使用 Binding 有一个前提:绑定的目标只能是依赖属性. 而 PasswordBox 控件中的 Pa ...

  7. 如何判断7z压缩文件格式

    如果压缩文件的后缀不是7z,那么如何如何判断文件格式呢?那就是通过文件头判断. 7z文件头前6位,固定是:377ABCAF271C,其中前两位37.7A分别是"7""z& ...

  8. 解决TrueNAS中Smb共享文件路径不区分大小写的问题

    问题 在Truenas中, 默认的smb文件分享中, 文件夹是不区分大小写的. 这在一些情况下会导致无法重命名等问题, 严重时可能会造成拷贝文件时的全文件夹文件丢失. 这是linux下的情况, 在已存 ...

  9. itest(爱测试) 开源接口测试，敏捷测试管理平台10.0.0GA 发布

    一:itest work 简介 itest work 开源敏捷测试管理,包含极简的任务管理,测试管理,缺陷管理,测试环境管理,接口测试,接口Mock,还有压测 ,又有丰富的统计分析,8合1工作站.可按 ...

  10. js数组操作——对象数组根据某个相同的字段分组

    先说点废话 最近在实际业务中,需要编写一个方法根据数组中每一个对象的一个相同字段,来将该字段值相等的对象重新编入一个数组,返回一个嵌套的数组对象,特地来做个总结. 当然需要注意的是,在开发过程这种数组 ...