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

原创已于 2022-07-11 15:11:03 修改 · 911 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #css3 #css

于 2022-03-01 11:51:25 首次发布

前端专栏收录该内容

6 篇文章

订阅专栏

本文介绍了position:sticky在网页布局中的运用，它类似于固定定位但会在屏幕滚动时显现，不同于传统的relative、absolute和fixed。重点讲述了NutUi nut-sticky组件的使用和与fixed定位的对比，适合对新兴定位方式感兴趣的开发者参考。

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

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

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

令狐义瑜

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法

10-23

在本文中，我们将会深入探讨如何利用JavaScript来控制页面元素的显示位置，使其固定在屏幕的某个特定位置，并且能够监听屏幕高度的变化，根据变化情况动态地调整元素的位置或样式属性。这一过程涉及到网页设计与前端...

css控制元素高度实现自底向上和自顶向下的方法

09-24

然而，当需要一连串元素共同占据屏幕高度时，单纯使用 vh 单位可能无法满足。此时，我们需要采用自顶向下的控制方法。这种方法的关键在于避免元素高度受到子元素的“撑开”，因为默认情况下，元素的高度是自动计算的...

参与评论您还未登录，请先登录后发表或查看评论

css - 当文本内容长度超出屏幕宽度时，以省略号代替

weixin_34275734的博客

01-11

169

sticky 粘性定位使用

Cool_so_cool的博客

10-14

476

sticky的使用： .box{ position: sticky; top: 100px; } 设置 position:sticky 同时给一个 (top,bottom,right,left) 之一即可 **使用条件：父元素不能overflow:hidden或者overflow:auto属性。必须指定top、bottom、left、right4个值之一，否则只会处于相对定位父元素的高度不能低于sticky元素的高度 sticky元素仅在其父元素内生效** 本文来源：码农网本文链接：htt

读书笔记----css定位和溢出显示

遇见更好的自己

03-25

862

1. static 默认指定元素按照常规的文档内容流进行定位。静态定位元素不能使用top,left类似属性定位。如果对文档使用css定位技术，positon设置为除此之外其他属性。 2. absolute 元素是相对于它包含的元素进行定位。可能是一个容器或是浏览器窗口 3. fixed相对于浏览器窗口进行定位的。固定定位的元素总是显示在那里，不会随着文档其他部分滚动

【安卓】让子元素超出容器限制、！如何实现更灵活的容器布局、！

不一样的思维,不一样的人生、！

07-10

3693

安卓中LinearLayout是用得最得心应手的容器,但有时候貌似不尽人意、

CSS定位布局及溢出

SORYUSHIKINAMI的博客

04-28

1223

定位： CSS定位（position）属性允许你自由设定元素的位置。定位的基本思想很简单，他允许你定义元素框相对于其正常位置应该出现的位置，或者相对于有定位的父元素，另一个元素甚至浏览器窗口本身的位置 CSS有三种基本的定位机制：普通流，浮动和绝对定位。 position定位 position:static 静止定位元素默认状态 position:absolute 绝对定位相对...

css实现一个元素高度固定宽度按比例显示效果

09-22

在CSS布局设计中，有时我们需要实现一个元素的高度固定，而宽度按照特定的比例自动调整，以保持内容的纵横比。这通常适用于图像、视频等需要保持原始比例显示的媒体元素。在给定的示例中，目标是使一个包含视频的`...

jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单

10-21

【jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单】是网页开发中一个常见的需求，这种效果能够提升用户体验，使用户在浏览页面时始终保持导航菜单可见。本实例通过结合jQuery库和CSS3技术，实现了类似...

CSS设置高度

Toml_的博客

08-04

1786

4. 自动高度：如果你希望 `@article.content` 的高度根据其内容自动调整，您可以将其高度设置为 `auto`。1. 固定高度：你可以直接为 `@article.content` 设置一个固定的高度值，以像素（px）为单位。2. 最大高度：你可以为 `@article.content` 设置一个最大高度值，以像素（px）为单位。在上述示例中，`.article-content` 类的元素最小高度被设置为 400px。这种方法适用于您希望内容区域始终具有固定的高度，无论内容的实际高度如何。

HTML 元素内容超出尺寸范围怎么办？

why568310613的博客

01-06

8469

元素的内容部分超出尺寸范围，称为溢出。默认情况下，溢出部分仍然可见。

nutui-uniapp项目：Sticky 粘性布局、支持固定顶部（案例）

最新发布

草巾冒小子的博客

05-08

633

（scroll滑块滚动位置高度还在屏幕高度比范围之外）后滚动（此处scroll滑块滚动位置高度还在屏幕高度比例范围内）

CSS行类使某些元素超出框架，而它们应该是静态的并固定在显示器底部

4G/5G随身WiFi专业DIY改装

09-02

177

要使某些元素在框架内保持静态并固定在显示器底部，可以使用 CSS 的position属性和bottom属性来实现。以下是一个示例代码：登录后复制 body { height: 100vh; /* 确保页面高度充满整个视口 */ } .fixed-element { position: fixed; bott...

css中z-index与定位关系、宽度超出屏幕设置box-sizing相关小技巧

j15087159186的博客

07-09

540

css中z-index与定位关系、宽度超出屏幕设置box-sizing相关的小技巧

CSS实现顶部底部高度固定，中部高度自适应。（flex布局，小程序，中部含scroll-view 标签）

博客

03-11

831

【小程序】css实现顶部底部高度固定，中部高度自适应。（flex布局，中部含scroll-view 标签）

CSS 实现元素固定宽高比

Jiapan_Yu的博客

01-07

2624

此文档是关于高度随宽度变化的固定宽高比，也即包含块 (containing block) 的宽度变化时元素的高度才会相应的变化。这种形式的固定宽高比的原理是因为当元素的上下 padding 值用百分比的形式时是相对于包含块的宽度而言的。当包含块的宽度变化时，元素的 padding 也会按照设置的百分比变化。我们知道 display: block 的元素 (即块级元素) 的宽度会占满父元素的 content area 宽度，当我们在 body 元素下放一个 div 元素并设置其高度为0并且设置 paddi

css3（五）浮动、定位、溢出处理

qq_38904347的博客

08-28

785

浮动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

1996

CSS: 页面底部自适应：页面高度不足时，在底部显示；页面高度超出时，随页面滚动

css元素相对屏幕固定

12-27

### CSS 固定元素相对于屏幕的定位为了使一个元素固定在屏幕上某个特定的位置，可以使用 `position: fixed` 属性。这会让该元素相对于视口（viewport），也就是用户的屏幕窗口保持不变，即使滚动页面也不会改变其位置。下面是一个简单的例子展示如何创建一个固定的导航栏： ```css .navbar { position: fixed; top: 0; left: 0; width: 100%; background-color: #333; color: white; padding: 10px 0; } ``` 此代码片段定义了一个名为 `.navbar` 的类[^1]，它会始终位于浏览器窗口顶部，并占据整个宽度。背景颜色设为深灰色并带有白色文字以提高可读性。内边距用于增加上下间距使得内容不会紧贴边缘。如果希望有更多控制权，比如让固定元素距离右侧或底部有一定距离，则可以在样式表中相应调整 `right`, `bottom` 属性值: ```css .footer { position: fixed; bottom: 0; right: 0; width: auto; background-color: #f8f9fa; padding: 5px 15px; } ``` 这段代码展示了如何创建一个右下角的小部件或者通知框，通过设定 `width:auto` 来允许它的宽度根据内部文本自动调整大小[^2]。需要注意的是，在某些情况下可能还需要考虑不同设备上的表现差异以及可能出现的内容遮挡问题。因此建议测试各种分辨率下的布局效果，并适当运用媒体查询来优化响应式设计[^4]。