今天在做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. Pytorch入门—Tensors张量的学习

    Tensors张量的学习 张量是一种特殊的数据结构,与数组和矩阵非常相似.在PyTorch中,我们使用张量来编码模型的输入和输出,以及模型的参数. 张量类似于NumPy的ndarrays,只是张量可以 ...

  2. WEB服务与NGINX（19）- nginx 防盗链功能

    目录 1 nginx防盗链功能 1.1 盗链功能概述 1.2 实现盗链 1.3 实现防盗链 1 nginx防盗链功能 1.1 盗链功能概述 防盗链基于客户端携带的referer实现,referer是记 ...

  3. SQL——连续出现的数字

    SQL三个排序函数 ROW_NUMBER().RANK().DENSE_RANK() ROW_NUMBER()不并列 连续的 RANK()分组不连续排序(跳跃排序) DENSE_RANK()并列连续 ...

  4. 教你如何破解虚拟机root密码

    一.开机时按e键,即可进入grub编辑界面,光标选择第一条,e表示进入编辑模式. 当机器开机出现如图1所示的kernel菜单后,按e键. 二.将光标移动到以linux开头的行,对图2中标注的位置进行修 ...

  5. Splashtop远程桌面再次增强：支持4K视频流

    远程桌面工具,主流的有10款总有,国内用的比较多的有teamviewer.Splashtop.向日葵等.几款软件各有千秋,其中Splashtop最大的特性就是快速.流畅.产品无敌,运营佛系,哈哈.下面 ...

  6. 谈谈 JVM 垃圾回收机制

    前言 垃圾回收需要思考三件事情,哪些内存需要回收?什么时候回收?如何回收? 一.哪些内存需要回收 JVM 的内存区域中,程序计数器.虚拟机栈和本地方法栈的生命周期是随线程而生,随线程而灭的.这几个区域 ...

  7. bond网卡

    目录 一.bond概述 1.1.bond的优点 二.bond模式 2.1.mode=0 2.2.mode=1 2.3.mode=2 2.4.mode=3 2.5.mode=4 2.6.mode=5 2 ...

  8. Django——Media配置

    settings.py中的配置: MEDIA_ROOT 和 MEDIA_URL MEDIA_ROOT 是指:用户上传文件的根路径 --> MEDIA_ROOT = os.path.join(BA ...

  9. 关于ThreadLocal最直白的解释

    ThreadLocal 底层原理如下: 实线是强引用,虚线是弱引用 Thread 持有 ThreadLocal 对象的引用,ThreadLocalMap 是 Thread 的成员变量,它是一个 Map ...

  10. Understanding Swift’s value type thread safety - 代码分析（一）

    结构体并不代表线程安全,swift在此上未做保证 func testScenarioA() throws { var store: Int = 0 DispatchQueue.concurrentPe ...