[css3]元素超过屏幕时固定元素

已于 2022-07-11 15:11:03 修改
阅读量773 收藏
点赞数
分类专栏： 前端 文章标签： vue.js css3 css
于 2022-03-01 11:51:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/notdreamfish/article/details/123202324
版权

先说结果：其实就是position: sticky;相当于普通时间不会有什么特别显示，但是当屏幕滚动到指定位置时就会出现fixed定位。

之前一般relative、absolute、fixed用的比较多，但是今天看到了NutUi的nut-sticky组件，突然好奇就去查了一下，发现这个定位好像到处都有但是我很少用，就记一下省的回头用到了又忘了。

看到CSDN这个编辑页面也有这个定位的使用，就顺手标记一下跟fixed的区别吧

令狐义瑜
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS中固定宽度布局的详细教程
12-13
（结合 CSS 媒体查询，能够适应最大和最小的屏幕，业界称之为 响应式设计。）  弹性。在浏览器窗口变宽时，不仅布局变宽，而且所有内容元素的大小也会变化。（实现太过复杂，不多介绍。） 1.2 布局高度 多数情况下...
CSS定位布局及溢出
SORYUSHIKINAMI的博客
04-28 1052
定位： CSS定位（position）属性允许你自由设定元素的位置。 定位的基本思想很简单，他允许你定义元素框相对于其正常位置应该出现的位置，或者相对于有定位的父元素，另一个元素甚至浏览器窗口本身的位置 CSS有三种基本的定位机制：普通流，浮动和绝对定位。 position定位 position:static 静止定位 元素默认状态 position:absolute 绝对定位 相对...
sticky 粘性定位使用
Cool_so_cool的博客
10-14 321
sticky的使用： .box{ position: sticky; top: 100px; } 设置 position:sticky 同时给一个 (top,bottom,right,left) 之一即可 **使用条件： 父元素不能overflow:hidden或者overflow:auto属性。 必须指定top、bottom、left、right4个值之一，否则只会处于相对定位 父元素的高度不能低于sticky元素的高度 sticky元素仅在其父元素内生效** 本文来源：码农网 本文链接：htt
将页面滚动条定位到固定位置的三种方法
最新发布
duang_summer的博客
03-25 763
"lianxiangText"是有滚动条，需要滚动条定位的盒子id；可以使用锚点链接、scrollToView()targetId是目标文字所在标签的id；
读书笔记----css定位和溢出显示
遇见更好的自己
03-25 768
1.     static 默认 指定元素按照常规的文档内容流进行定位。静态定位元素不能使用top,left类似属性定位。如果对文档使用css定位技术，positon设置为除此之外其他属性。 2.     absolute 元素是相对于它包含的元素进行定位。可能是一个容器或是浏览器窗口 3.     fixed相对于浏览器窗口进行定位的。固定定位的元素总是显示在那里，不会随着文档其他部分滚动
HTML 元素内容超出尺寸范围怎么办？
why568310613的博客
01-06 8003
元素的内容部分超出尺寸范围，称为溢出。默认情况下，溢出部分仍然可见。
CSS 实现元素固定宽高比
Jiapan_Yu的博客
01-07 2304
此文档是关于高度随宽度变化的固定宽高比，也即包含块 (containing block) 的宽度变化时元素的高度才会相应的变化。 这种形式的固定宽高比的原理是因为当元素的上下 padding 值用百分比的形式时是相对于包含块的宽度而言的。当包含块的宽度变化时，元素的 padding 也会按照设置的百分比变化。 我们知道 display: block 的元素 (即块级元素) 的宽度会占满父元素的 content area 宽度，当我们在 body 元素下放一个 div 元素并设置其高度为0并且设置 paddi
CSS实现顶部底部高度固定，中部高度自适应。（flex布局，小程序，中部含scroll-view 标签）
Lsiyi_的博客
03-11 635
【小程序】css实现顶部底部高度固定，中部高度自适应。（flex布局，中部含scroll-view 标签）
CSS3网格的三个新特性详解
12-10
基于固定960像素宽的简单网格已经行不通——我们需要流体网格。 CSS2规范中用浮动解决列的方法存在一个问题。为了防止父元素破环你的布局，我们需要添加clearfix。通过这种方法，来修正父元素的高度坍塌问题（浮动
html5+css3 弹出遮罩层
09-22
这是一款使用html5 svg和css3制作的全屏遮罩导航菜单，这些遮罩层没有固定的大小但是它们全屏覆盖整个屏幕，可以说大小是以你的浏览器为准。默认是绿色背景，你完全可以换成其它颜色，这个不用我细说了吧。 请在现代...
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
01-19
本文实例讲述了js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法。分享给大家供大家参考。具体如下： //控制logo的显示位置 Begin window.addEventListener(resize, function () { // 得到屏幕尺寸 (内部/...
屏幕滚动到相应位置，执行css动画
11-06
当屏幕滚动到相应的位置之后，css animation动画再开始执行
CSS+DIV布局内容不满一屏时页底始终固定在底部_无横滚条_多浏览器兼容
12-30
4.本例子只解决了页面不满一屏时的页底浮动问题，如果你的页面撑满一页有竖滚动条时，页底是固定不变的。 5.关于第4点本人认为，并不是这个解决方案有缺陷。因为你不应该用这个例子解决你的既要满屏居低又要超一屏还...
css3（五）浮动、定位、溢出处理
qq_38904347的博客
08-28 688
浮动float属性 left：元素向左浮动 right：元素向右浮动 none：默认值。元素不浮动，并会显示在其文本中出现的位置 浮动元素不在标准文档流中 清除浮动clear属性 left：在左侧不允许浮动元素 right：在右侧不允许浮动元素 both：在左、右两侧不允许浮动元素 none：默认值。允许浮动元素出现在两侧 定位position属性 static：默认值，没有定位...
css超出显示...
热门推荐
weixin_50304773的博客
04-11 5万+
css超出显示… 单行的。必须指定一个宽度 overflow: hidden; text-overflow: ellipsis; display: -webkit-box; 多行 overflow: hidden; //超出的文本隐藏 text-overflow: ellipsis; //溢出用省略号显示 display: -webkit-box; -webkit-line-clamp: 2; // 超出多少行 -webkit-box-orient: vertical; ———————————————— 版
CSS: 页面底部自适应：页面高度不足时，在底部显示；页面高度超出时，随页面滚动
hyupeng1006的博客
06-21 1673
CSS: 页面底部自适应：页面高度不足时，在底部显示；页面高度超出时，随页面滚动
div宽度设置width:100%后再设置padding超出父元素( flex设置width: 100%后超过屏幕)|css:box-sizing
秋叶原的黑猫的博客
07-12 3331
在全局css样式中设置该属性，可以使得在整个项目中设置的width和height方式都相同，设置的width即为所看到的宽度，不会出现容器“越界”的情况。如下图所示，子元素宽度大于父元素，这样可能会导致屏幕溢出，出现滑动条。最终将该样式文件引用到整个项目即可，具体引用方法这里不再赘述。我们可以在父元素中设置。...
【安卓】让子元素超出容器限制、！如何实现更灵活的容器布局、！
不一样的思维,不一样的人生、！
07-10 3583
安卓中LinearLayout是用得最得心应手的容器,但有时候貌似不尽人意、
fixed,absolute 布局使用width:100%超出屏幕宽度
w18637468680的专栏
10-18 7400
在使用fixed,absolute 布局时，如果设置了左右方向的marg,pad等，在使用width:100%，最终的实际宽度等于全屏宽度+pading值， 这一点跟流中的元素表现有所不同。...
写出 css，向左滑动时元素一直固定在屏幕左侧，向下滑动时元素能随屏幕上划
06-01
以下是实现向左滑动时元素一直固定在屏幕左侧，向下滑动时元素能随屏幕上划的 CSS 代码示例： ```css /* 固定元素的样式 */ .fixed-element { ...当用户向左滑动屏幕时，固定元素会一直保持在屏幕左侧。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值