今天在做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. 「IT运维迷宫」那些让人头疼的常见问题与破局之道

    在数字化浪潮汹涌的今天,IT运维如同一座错综复杂的迷宫,稍有不慎便可能迷失方向.作为企业运营的幕后英雄,运维团队常常面临着各种突如其来的挑战.本文将带你深入探索IT运维中的那些常见"坑&qu ...

  2. 03 Xpath lxml库的安装和使用

    Python lxml库的安装和使用 lxml 是 Python 的第三方解析库,完全使用 Python 语言编写,它对 Xpath 表达式提供了良好的支持,因此能够了高效地解析 HTML/XML 文 ...

  3. github、gitee冲突配置ssh key

    背景 当有多个git账号时,比如: a. 两个gitee,一个账号是用于公司内部的工作开发,一个账号是自己学习的个人账号: b. 一个github,用于自己进行一些开发活动: 操作: 生成不同的key ...

  4. Pageoffice6 实现后台批量生成PDF文档

    在实际项目开发中经常会遇到批量后台动态生成PDF文档的需求,目前网上有一些针对此需求的方案,如果您想要了解这些方案的对比,请查看后台生成单个Word文档中的"方案对比". 如果一次 ...

  5. AIRIOT物联网低代码平台如何配置OPC DA驱动？

    AIRIOT物联网低代码平台提供了丰富的驱动,兼容了市面上95%以上的传感器.控制器及数据采集设备等,并且在持续增加中,能够快速.便捷地实现数据采集与控制功能. AIRIOT物联网低代码平台如何配置O ...

  6. uniapp video组件全屏导致页面横竖错乱问题

    uniapp video组件全屏导致页面横竖错乱问题 背景介绍 使用 video组件做一个视频播放功能,不全屏的情况正常.在苹果手机上全屏后,点击左上角退出全屏,页面出现问题如下图问题,主要系统iOS ...

  7. 可视化学习：使用极坐标参数方程和SDF绘制有趣的图案

    前言 本文将介绍如何使用极坐标参数方程和上一篇文章提到的距离场SDF来绘制有趣的图案. 说到曲线和几何图形的绘制,我们知道图形系统默认支持的是通过直角坐标绘制,但是有些曲线呢,不太容易使用直角坐标系来 ...

  8. rbenv：Ruby 多版本管理利器

    在 Ruby 开发的世界中,经常需要面对不同项目使用不同 Ruby 版本的情况.这时,一个高效.灵活且易于使用的 Ruby 版本管理工具就显得尤为重要. rbenv 正是这样一个工具,它允许开发者在同 ...

  9. Android 13 - Media框架（9）- NuPlayer::Decoder

    关注公众号免费阅读全文,进入音视频开发技术分享群! 这一节我们将了解 NuPlayer::Decoder,学习如何将 MediaCodec wrap 成一个强大的 Decoder.这一节会提前讲到 M ...

  10. Android 12(S) MultiMedia Learning（十）ACodec & OMX

    这一节的学习分为三块内容,omx hidl service用法.OMX架构.ACodec中的buffer分配. 1.omx hidl service system可以借助vndbinder来访问ven ...