CSS fixed

最新推荐文章于 2024-10-30 22:08:00 发布
最新推荐文章于 2024-10-30 22:08:00 发布
阅读量532 收藏
点赞数
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/YYecust/article/details/52421228
本文介绍了在单页面应用(SPA)中实现固定头部和底部的CSS样式技巧。通过设置position为fixed，并指定top和bottom属性，可以使元素始终保持在屏幕顶部或底部。此方法适用于创建导航栏和其他布局组件。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在SPA中经常需要固定底部和顶部
参考
http://bradfrost.com/blog/mobile/fixed-position/
可以得到写法

固定顶部

   .header {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
   }

固定底部

  .footer {
    position: fixed;
    right: 0;
    bottom: 0;
    width: 100%;
  }
yaoyuan-yy
关注
解决 UniApp CSS fixed固定宽度铺满显示过大导致布局错位的问题 h5/小程序/app通用 position: fixed；
代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。
11-25 328
问题来源：UniApp 固定定位的默认写法会忽略实际设备的安全区域。解决方案：使用 UniApp 提供的 CSS 变量--window-*，动态适配不同设备。适配效果：页面内容始终处于合理的展示区域，无需手动为每种设备调整样式。通过这种方式，不仅可以简化开发流程，还能更好地提升用户体验，让你的项目在各种设备上的布局都精准贴合。
CSS 固定导航栏（fixed）和粘性导航栏（sticky）
CyberPlayer的博客
02-22 1991
垂直式 水平式 注意：固定定位在移动设备上可能无法正常工作。 粘性式 注意：Internet Explorer、Edge 15 和更早版本不支持粘性定位。 Safari 需要 -webkit- 前缀（请参见上面的例子）。 必须指定top、right、bottom或left至少之一，以使粘性定位起作用。 ...
css固定元素位置(fixed)
weixin_30847865的博客
05-01 475
我们经常碰到的需求是希望页面某个元素固定在浏览器的一个位置，无论如何滚动滚动条，位置不变，就例如经常看到的弹出广告。方法一般是使用js控制，或者使用css。这里我写的是css的控制方法。 在IE7以上版本及firefox、opera、safari里，都支持css属性"position:fixed"，它的作用就是将元素相对于窗口固定位置。代码如下 #ads{position:fixe...
css fixed定位
许博文的专栏
01-16 673
需要制作一个弹幕发送框，用到fixed定位输入框。
CSS固定定位
2303_80038066的博客
10-30 674
设置 left，top标签后，我们可以清楚看到红色盒子是浮动在绿色盒子上边，这样看起来固定定位是不是跟绝对定位很像，但事实上，而这有很大的区别，在CSS中，固定定位（fixed positioning）允许元素相对于浏览器窗口固定位置，无论用户滚动页面，该元素都会保持在同一位置不动。由图可知，绿色盒子在开启固定定位后“消失”了，但其实是因为红色盒子在被设置position : fixed后相对的浮动起来了，而绿色盒子会替补原来红色盒子的位置，所以我们平面看的效果就是绿色盒子的位置被红色覆盖了。
CSS学习21：fixed（固定定位）
热门推荐
玉安_ZhangDe的博客
04-09 4万+
固定定位是元素固定于浏览器可视区的位置。（认死理型） 主要使用场景： 可以在浏览器页面滚动时元素的位置不会改变。 语法： 选择器 { position: fixed; } 固定定位的特点：（务必记住）： 1.以浏览器的可视窗口为参照点移动元素。 跟父元素没有任何关系 不随滚动条滚动。 2.固定定位不在占有原先的位置。 固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。（认死理型） 完全脱标—..
css中position:fixed实现div居中上下左右居中
09-25
本篇文章主要探讨了如何利用CSS属性position:fixed来实现DIV的绝对居中。 首先，了解position:fixed属性的作用是关键。position:fixed表示元素相对于浏览器窗口进行定位，这意味着无论页面如何滚动，元素都将保持在...
CSS实现模拟position的fixed页面定位效果
12-10
在网页设计中，`position:fixed` 是一种 CSS 定位模式，用于创建元素固定在浏览器视口中的某个位置的效果，即使用户滚动页面，该元素也会保持在屏幕上的指定位置。然而，在某些不支持 `position:fixed` 或者需要兼容...
css中关于定位属性position为fixed的使用记载
09-25
总的来说，`position: fixed`是一个强大的CSS特性，它可以创建出许多动态和交互性的布局效果，但同时也需要注意与滚动事件、动态添加和移除定位属性时可能出现的问题。通过合理地设计布局和使用外部容器，我们可以...
CSS固定定位{position:fixed}
拓
11-17 3353
来自：http://www.csharpwin.com/dotnetspace/10790r7213.shtml某个元素始终位于浏览器的底部或某些地方不知道您是否留意了，浏览http://dancewithnet.com时，浏览器右下角有一个标着top的黑色直角三角形，可以点击它返回到正在浏览的网页页眉。当滚动网页时，它的位置一直没有任何改变，您感觉它怎么样？这就是通过CSS的定位属性{position:fixed}来实现的，通过它可以让HTML元素脱离文档流固定在浏览器的某个位置。IE7、Firefox、
CSS属性详解——position:fixed
Wod_7的博客
06-04 1万+
CSS中的固定定位fixed定位是一种定位方式，使元素相对于浏览器窗口固定位置，换句话说，固定定位的元素会脱离文档流，始终停留在浏览器窗口的某个位置不动，即使用户上下滚动页面也不会改变其位置。
CSS定位中的Fixed定位
m0_46331585的博客
08-03 9983
相对定位 没有脱离文档流，相对于原来的位置。 position: relative; top: 20px; right: 20px; 绝对定位 脱离文档流了，（相对于父元素。一般是以<body>为参考的，但若父容器设置了相对或者绝对定位，就以父元素为主）（控制堆叠顺序 ( z-index )注意，没有单位·`） position: absolute; top: 20px..
css定位属性position:fixed
wangooo的博客
01-02 6512
Absolute定位是相对于 static（position默认值）定位以外的第一个父元素进行定位，如果不存在已定位的父元素，则相对于body元素。Fixed定位是相对于浏览器视口来定位的，也就是说，元素的位置不会随着页面滚动而改变，始终会固定在视口的某个位置。Fixed和Absolute都是CSS中定位的属性，它们用于控制元素在页面中的位置，其中Fixed表示固定定位，Absolute表示绝对定位。Absolute定位的常用场景是实现页面中的局部定位，例如可以实现图片的悬浮效果、文字的重叠等。
html中fixed属性,CSSposition属性中：fixed使用详解
weixin_31999597的博客
06-05 7334
关于fixed属性，在什么情况下需要用，怎么用，首先，我们应该先了解下fixed属性的说明：fixed总是以body为定位时的对象，总是根据浏览器的窗口来进行元素的定位，通过"left"、 "top"、 "right"、 "bottom" 属性进行定位。那么，我们了解了fixed属性的说明后，就可以知道它的作用了。当我们需要使一个层相对于浏览器来自动调整该层的位置的时候，如果你使用position...
html中fixed属性,CSS中Fixed的属性
weixin_42497299的博客
06-05 561
css中常见的布局问题中定位是比较难懂的一个点比如relative和absolute定位fixed定位与relative的关系下面这个小demo演示一下fixed与父级子级同级的效果展示这三个div都是【fixed】属性,但你会发现父级的zindex这时压根没盖过子级的z-index同级的情况下是会被遮罩住的。fixedbody {min-height: 1500px;font-size: 20p...
css fixed窗口底部固定定位
p_pppxxxxmmm的博客
11-18 1632
前言已经不想说了，直接贴代码吧
CSS布局（定位、浮动）
li17835756262的博客
09-18 1706
（2）父元素宽度如果不够， 例如不能放下一个子元素4， 那么子元素4在贴边时， 会跳过上一个子元素3， 向更上一个子元素2进行贴边， 如果子元素2后面位置不够， 继续跳过子元素2向前面的子元素1进行贴边。（3）如果子元素4在跳过子元素3向更前面的子元素2贴边时， 子元素2的高度不高于子元素3， 子元素2没有延伸出一个高度的边让子元素4贴边， 那么子元素4就会跳过子元素2向子元素1进行贴边。性质： 固定定位的元素脱离标准流， 让出标准流位置， 可以设置宽高， 根据偏移量属性可以任意设置在浏览器窗口的位置。
CSS定位布局详解
大河之犬的博客
10-03 8306
CSS定位使你可以将一个元素精确地放在页面上指定的地方。联合使用定位和浮动，能够创建多种高级而精确的布局。其中，定位布局共有4种方式。固定定位（fixed相对定位（relative绝对定位（absolute静态定位（static。
css fixed定位相对谁
最新发布
02-10
### CSS `fixed` 定位的工作原理 在 CSS 中，当元素被设置为 `position: fixed` 时，该元素会被移除标准文档流，并相对于视口（即浏览器窗口）进行定位[^1]。这意味着即使页面滚动，`fixed` 元素的位置也不会改变。 #### 参照对象 对于设置了 `position: fixed` 的元素来说，其参照的对象是整个浏览器的视窗而非任何其他 HTML 元素或容器[^5]。因此，在大多数情况下，可以认为 `fixed` 元素总是基于屏幕可视区域来决定自己的位置。 #### 影响因素 影响 `fixed` 元素最终显示位置的主要有两方面： - **包含块 (containing block)**：尽管 `fixed` 元素不依赖于父级或其他祖先元素作为参考点，但是仍然存在一个抽象的概念叫做 "包含块", 这个概念决定了应用到此元素上的宽度、高度以及其他一些布局行为[^3]。 - **偏移量属性 (`left`, `right`, `top`, `bottom`)**：通过这些属性可以直接控制 `fixed` 元素距离视窗四边的距离，从而精确定义它的放置位置。 #### 特殊情况说明 值得注意的是，并不是所有的场景下 `fixed` 都会严格遵循上述规则。例如，在某些特定条件下，如使用了特殊的滤镜效果或者其他复杂的层叠上下文环境里，可能会观察到异常现象，这可能是因为渲染引擎内部机制导致的行为偏差[^4]。 ```html <div class="father"> <div class="child"></div> </div> <style> .father { width: 300px; height: 300px; background-color: pink; } .child { width: 100px; height: 100px; background-color: orange; position: fixed; bottom: 0; } </style> ``` 在这个例子中，`.child` 被设定为了 `position: fixed` 并且底部贴合视窗底端。无论 `.father` 或者 页面其余部分如何变化，只要没有额外样式干扰，`.child` 将始终保持在屏幕最下方不变。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值