今天在做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. 羽夏壳世界—— PE 结构（下）

    写在前面   此系列是本人一个字一个字码出来的,包括代码实现和效果截图. 如有好的建议,欢迎反馈.码字不易,如果本篇文章有帮助你的,如有闲钱,可以打赏支持我的创作.如想转载,请把我的转载信息附在文章后 ...

  2. SpringBoot-mybatis-plus 分页

    前言: 想必数据分页对于每一个程序员并不陌生,针对分页查询功能代码实现上:肯定是代码简洁明了且能达到分页的效果会更好! 现在我将基于SpringBoot - mybatisPlus分页查询的方法总结如 ...

  3. aws语音呼叫调用，告警电话

    import requests data = { 'channel': '99x', 'called_number': '135xxx', 'tts_code': 'TTS_xx', 'tts_par ...

  4. kubernetes 之二进制方式部署

    我的资料链接:https://pan.baidu.com/s/18g0sar1N-FMhzY-FCMqOog 两种集群架构图 多master需要在集群上面加个lb,所有的node都需要连接lb,lb帮 ...

  5. EasyUI组件新增方法与事件

    以window组件为例 事件 扩展事件直接定义在options中,可以再初始化组件时定义事件,也可以使用时临时定义事件.这里是组件初始化后在添加的. 使用情景:添加,插入功能.主界面表格分别点击添加和 ...

  6. 简单 python 爬虫（爬取小说网）

    #https://blog.csdn.net/Isana_Yashiro/article/details/84582946 import requestsfrom bs4 import Beautif ...

  7. MPI学习笔记（四）：矩阵相乘的Cannon卡农算法

    mpi矩阵乘法:C=αAB+βC 一.Cannon卡农算法基本介绍 1.二维矩阵串行乘法 两个n维方阵的乘法A×B=C的串行计算公式为: 下图是用图示来表示的这种计算规则: 2.二维块划分的思想 并行 ...

  8. php的下载与安装

    一,进入到php的官方网站   https://www.php.net/   ,进入到下载页面: 选择 PHP 7.2.30 的Windows版本 具体的下载页面版本区分: 下载后,得到如下压缩包到如 ...

  9. 解读注意力机制原理，教你使用Python实现深度学习模型

    本文分享自华为云社区<使用Python实现深度学习模型:注意力机制(Attention)>,作者:Echo_Wish. 在深度学习的世界里,注意力机制(Attention Mechanis ...

  10. Django模型层Models的使用步骤

    1.安装pymysql(这里使用MySQL数据库) pip install pymysql 2.在Django的工程同名子目录的__init__.py文件中添加如下语句 from pymysql im ...