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

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

vue.js css3 css

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

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

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

CSS定位布局及溢出
SORYUSHIKINAMI的博客
04-28 1118
定位： CSS定位（position）属性允许你自由设定元素的位置。 定位的基本思想很简单，他允许你定义元素框相对于其正常位置应该出现的位置，或者相对于有定位的父元素，另一个元素甚至浏览器窗口本身的位置 CSS有三种基本的定位机制：普通流，浮动和绝对定位。 position定位 position:static 静止定位 元素默认状态 position:absolute 绝对定位 相对...
css - 当文本内容长度超出屏幕宽度时，以省略号代替
weixin_34275734的博客
01-11 141
<style> .ellipsis{ text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } </style>  
页面滚动条定位到指定位置
最新发布
dy1717的博客
08-20 407
页面滚动条定位到指定位置
【安卓】让子元素超出容器限制、！如何实现更灵活的容器布局、！
不一样的思维,不一样的人生、！
07-10 3618
安卓中LinearLayout是用得最得心应手的容器,但有时候貌似不尽人意、
HTML 元素内容超出尺寸范围怎么办？
why568310613的博客
01-06 8215
元素的内容部分超出尺寸范围，称为溢出。默认情况下，溢出部分仍然可见。
CSS实现顶部底部高度固定，中部高度自适应。（flex布局，小程序，中部含scroll-view 标签）
Lsiyi_的博客
03-11 693
【小程序】css实现顶部底部高度固定，中部高度自适应。（flex布局，中部含scroll-view 标签）
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
10-23
在本文中，我们将会深入探讨如何利用JavaScript来控制页面元素的显示位置，使其固定在屏幕的某个特定位置，并且能够监听屏幕高度的变化，根据变化情况动态地调整元素的位置或样式属性。这一过程涉及到网页设计与前端...
css控制元素高度实现自底向上和自顶向下的方法
09-24
然而，当需要一连串元素共同占据屏幕高度时，单纯使用 vh 单位可能无法满足。此时，我们需要采用自顶向下的控制方法。这种方法的关键在于避免元素高度受到子元素的“撑开”，因为默认情况下，元素的高度是自动计算的...
jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
10-21
【jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单】是网页开发中一个常见的需求，这种效果能够提升用户体验，使用户在浏览页面时始终保持导航菜单可见。本实例通过结合jQuery库和CSS3技术，实现了类似...
css实现一个元素高度固定宽度按比例显示效果
09-22
在CSS布局设计中，有时我们需要实现一个元素的高度固定，而宽度按照特定的比例自动调整，以保持内容的纵横比。这通常适用于图像、视频等需要保持原始比例显示的媒体元素。在给定的示例中，目标是使一个包含视频的`...
CSS3宇宙星空元素动画特效
04-06
可以使用fixed、absolute或relative值，根据需要将星空、行星和其他元素固定在屏幕的特定位置。 总结来说，创建“CSS3宇宙星空元素动画特效”需要熟练掌握CSS3的关键帧动画、变换、透明度控制、滤镜效果以及定位...
css3（五）浮动、定位、溢出处理
qq_38904347的博客
08-28 745
浮动float属性 left：元素向左浮动 right：元素向右浮动 none：默认值。元素不浮动，并会显示在其文本中出现的位置 浮动元素不在标准文档流中 清除浮动clear属性 left：在左侧不允许浮动元素 right：在右侧不允许浮动元素 both：在左、右两侧不允许浮动元素 none：默认值。允许浮动元素出现在两侧 定位position属性 static：默认值，没有定位...
CSS 元素滚动到指定的位置时变为固定定位
随性的豆干的博客
07-18 1613
的元素定位在父元素的底部，随着滚动发生，该元素将保持在其容器底部，直到解除条件满足。这意味着你需要选择合适的父元素来达到你想要的效果。该指定元素距离父元素底部的距离为0，也就是。元素滚动到指定的位置时变为固定定位其实是。
div宽度设置width:100%后再设置padding超出父元素( flex设置width: 100%后超过屏幕)|css:box-sizing
秋叶原的黑猫的博客
07-12 3573
在全局css样式中设置该属性，可以使得在整个项目中设置的width和height方式都相同，设置的width即为所看到的宽度，不会出现容器“越界”的情况。如下图所示，子元素宽度大于父元素，这样可能会导致屏幕溢出，出现滑动条。最终将该样式文件引用到整个项目即可，具体引用方法这里不再赘述。我们可以在父元素中设置。...
CSS 吸顶效果 滚动头部固定，小技巧
宁夏前端工程师，马卫斌，wx：1457508895
06-30 5890
在网页中，经常会用阴影来突出层级关系，特别是顶部导航，但有时候设计觉得没必要一开始就显示阴影，只有滚动后才出现。只有滚动以后才出现阴影。一般情况下，使用 JS 监听滚动事件动态添加类名就可以实现，不过经过我的一番尝试，发现这种效果仅仅使用 CSS 也能轻易实现。 css 实现原理 实现这个效果，需要一点点“CSS 障眼法”。假设有一层阴影，在默认情况下用一个元素遮挡起来，以下都称之为“遮挡物”。 根据以上原理，这里需要添加一个元素，阴影和遮挡物都可以用伪元素生成css 代码 以上......
css固定区域数据滚动
热门推荐
努力奔跑的小不点
08-01 1万+
【代码】css固定区域数据滚动。
css3 相邻,CSS秘密花园： 相邻元素样式
weixin_30043767的博客
08-03 1214
《CSS Secrets》是@Lea Verou最新著作，这本书讲解了有关于CSS中一些小秘密。是一本CSSer值得一读的一本书，经过一段时间的阅读，我、@南北和@彦子一起将在W3cplus发布一系列相关的读后感，与大家一起分享。问题在很多情况下，我们需要给元素的兄弟元素以不同的样式风格呈现。主要的用例是提高用户体验和在大屏幕中不断增加列表荐。下面是一些使用场景：邮件列表或类似基于文的列表展示。如...
HTML5+CSS3网页设计-第八章 定位网页元素.pptx
12-21
- 固定定位适用于创建固定位置的元素，如固定的顶部导航栏，无论用户滚动页面，该元素始终保持在屏幕的某个位置。 4. **实战任务** 本章的学习任务包括制作带按钮的轮播广告、模拟彩票购买页面、图书排行榜页面和...
css滚动到顶部自动固定
我的博客
06-06 231
css滚动到顶部自动固定
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值