今天在做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. 【进阶篇】基于 Redis 实现分布式锁的全过程

    目录 前言 一.关于分布式锁 二.RedLock 红锁(不推荐) 三.基于 setIfAbsent() 方法 四.使用示例 4.1RedLock 使用 4.2setIfAbsent() 方法使用 五. ...

  2. 一键接入大模型：One-Api本地安装配置实操

    前言 最近准备学习一下 Semantic Kernel, OpenAI 的 Api 申请麻烦,所以想通过 One-api 对接一下国内的在线大模型,先熟悉一下 Semantic Kernel 的基本用 ...

  3. MYSQL CONVERT、JSON_EXTRACT函数的使用总结

    一.CONVERT.CONCAT.COUNT函数联合查询 CONVERT()函数用于将值从一种数据类型转换为表达式中指定的另一种数据类型. MySQL还允许它将指定的值从一个字符集转换为另一个字符集. ...

  4. 提升WordPress网站加载速度的8个小技巧

    提升WordPress网站加载速度是至关重要的,它不仅可以提高用户体验,还有助于SEO排名.以下是提升WordPress网站加载速度的8个小技巧,希望能帮助到大家. 优化图片: 使用适当大小和格式的图 ...

  5. Python RabbitMQ Demo

    fanout消息订阅模式 生产者 # 生产者代码 import pika credentials = pika.PlainCredentials('guest', 'guest') # mq用户名和密 ...

  6. Vue——基本使用

    Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统.我们不再和 HTML 直接交互了.一个 Vue 应用会将其挂载到一个 DOM 元素上 (对于这个例子是 #app ...

  7. Windows Server系统 PaddleOCR失败解决方案

    因PaddleOCR引用了Opencv,在windows server 上 使用opencv出现 DLL load failed错误,发现缺失部分dll:MFPlat.dll.MF.dll.MFRea ...

  8. iOS面试题详解-开篇

    一.前言 转眼之前,已经毕业5年,从事iOS开发5年.5年的时间说长不长,却把我从刚毕业的毛头小伙子变成了现在的"中年大叔",不仅仅是外表还有心态. 一方面不愿意接收自己形体的改变 ...

  9. RTMP协议中的Chunk Stream ID （CID）的作用

    一.协议分层 RTMP包是以Message的结构封装的,结构如下所示: 1)Message Type ID在1-7的消息用于协议控制,这些消息一般是RTMP协议自身管理要使用的消息,用户一般情况下无需 ...

  10. NOIP模拟90(多校23)

    T1 回文 解题思路 原来 \(n^3\) 可以过 500 ... 先枚举一下路径长度,对于同一路径长度点数最多是 \(n\) 个,我们可以接着枚举从 \((n,m)\) 出发的路径长度相同的点. 然 ...