今天在做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. sqli-labs-master 第二,三,四关

    第二关: 判断注入类型:http://192.168.65.130/sqli-labs-master/Less-2/?id=1 --+ 原因:$sql="SELECT * FROM user ...

  2. pikachu靶机练习平台-xss

    第一题:反射性xss(get) 输出的字符出现在url中 第二题:反射性xss(post) 登录后输入<script>alert(1)</script> 第三题:存储型xss ...

  3. go-zero goctl命令图解

  4. ibus 输入法导致输入卡顿的解决方案

    系统: Zorin OS 16 Pro 基于 Ubuntu 20.04 LTS 关键词:Linux 间歇性卡顿.输入法导致卡顿.无法输入 本问题发生的情形是系统间歇性的无法接受键盘输入,无意间发现切换 ...

  5. HJ212-2017协议数据采集和接收

    1.客户端TCP和UDP的数据发送工具 工具和软件下载页面如下:http://www.zlmcu.com/document/tcp_debug_tools.html 2.服务端数据接收监控软件 IPA ...

  6. .NET周刊【5月第1期 2024-05-05】

    国内文章 一个开源轻量级的C#代码格式化工具(支持VS和VS Code) https://www.cnblogs.com/Can-daydayup/p/18164905 CSharpier是一个开源. ...

  7. 原创->CommonsCollections1-DefaultMap链

    今天我打算整点儿不一样的内容,通过之前学习的TransformerMap和LazyMap链,想搞点不一样的,所以我关注了另外一条链DefaultedMap链,主要调用链为: 调用链详细描述: Obje ...

  8. java获取Linux和window系统多网卡mac地址和IP

    public static List<Map<String, String>> getMacAndIp() throws SocketException { List<M ...

  9. 大数据Hadoop集群的扩容及缩容（动态添加删除节点）

    添加白名单和黑名单 白名单,表示在白名单的主机IP地址可以用来存储数据 企业中:配置白名单,可以尽量防止黑客恶意访问攻击. 配置白名单步骤如下:原文:sw-code 1)在NameNode节点的/op ...

  10. .NET快速实现网页数据抓取

    前言 今天我们来讲讲如何使用.NET开源(MIT License)的轻量.灵活.高性能.跨平台的分布式网络爬虫框架DotnetSpider来快速实现网页数据抓取功能. 注意:为了自身安全请在国家法律允 ...