CSS的position:fixed的使用

最新推荐文章于 2025-02-10 13:09:34 发布
原创 最新推荐文章于 2025-02-10 13:09:34 发布 · 180 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css

本文探讨了CSS中position:fixed属性的使用方法，并通过一个实际案例展示了如何让元素相对于浏览器窗口固定位置。文中还讨论了该属性在不同浏览器中的兼容性问题。

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

接触CSS已有相当长一段时间，我们竟然没有留意position:fixed的用法。

我们都知道CSS中定位属性position的值，除了默认的值外，还有absolute,relative和fixed。我平时比较常用absolute和relative，而position:fixed却没多关注。或许是因为当初在CSS中文手册中看到position:fixed旁边有说明“IE5.5及NS6尚不支持此属性”吧。

前段时间，在做一个项目时需要使一个层相对于浏览器边框固定，那时用position:absolute试了下，发觉absolute是对网页边框而言的。后来，上网查了一些根据滚动条的移动，动态地改变left和top的值的JavaScript语句，虽然能实现了类似的效果，但滚动条移动时，那个层晃来晃去的，感觉不好看，想要一种能使层固定不动的做法。

且看下面的代码：

<style type="text/css">
<!--
#help{
width:30px;
height:20px;
background-color:green;
position:fixed;
left:60px;
top:100px;
}
-->
</style>

我们用上面这段代码来定义页面上的一个层“help”（id=“help”）。这样就能实现我们想要的效果了。

在IE8、Firefox、Opera、Google等浏览器中测试，都没有问题，唯独低版本的IE中，这个属性无效。

 

本文原创，转载请注明出处，谢谢！http://www.blogjava.net/rongxh7（心梦帆影JavaEE技术博客）

使用CSS样式position:fixed水平滚动的方法
09-04
$('#rightsider').scrollFixed({fixed:'right'}); ``` 这段代码分别对ID为`leftsider`和`rightsider`的元素应用了插件，设置它们分别固定在浏览器的左侧和右侧，且在水平滚动时跟随。 总结来说，通过结合CSS的`...
CSS 同级元素position:fixed和margin-top共同使用的问题
09-22
本文探讨了在使用CSS定位属性position: fixed的同时，给同级元素添加margin-top所产生的布局问题，并提供了一些解决方案。 在HTML文档结构中，通常将元素分为头部（header）、内容区（content）、侧边栏（aside）和...
实例详解CSS中position的fixed属性使用
不积跬步,无以至千里;不积小流,无以成江海
10-30 2148
关于fixed属性，在什么情况下需要用，怎么用，首先，我们应该先了解下fixed属性的说明：fixed总是以body为定位时的对象，总是根据浏览器的窗口来进行元素的定位，通过"left"、 "top"、 "right"、 "bottom" 属性进行定位。 那么，我们了解了fixed属性的说明后，就可以知道它的作用了。当我们需要使一个层相对于浏览器来自动调整该层的位置的时候，如果你使用positi
css:position fixed使用
看陌生的风景的博客
07-23 925
position:fixed的元素将相对于屏幕视口（viewport）的位置来指定其位置。并且元素的位置在屏幕滚动时不会改变。 （上层元素有的使用了transform: translate(0, 0);导致position: fixed功能失效） pointer-events: none; 元素永远不会成为鼠标事件的target。但是，当其后代元素的pointer-events属性指定其...
CSS 中 position:fixed 属性应用
xuanjiewu的专栏
07-23 2058
转：http://jingyan.baidu.com/article/4d58d541d54e879dd4e9c033.html 关于fixed属性，在什么情况下需要用，怎么用，首先，我们应该先了解下fixed属性的说明：fixed总是以body为定位时的对象，总是根据浏览器的窗口来进行元素的定位，通过"left"、 "top"、 "right"、 "bottom" 属性进行定位。 那么，
css定位属性position:fixed
wangooo的博客
01-02 6520
Absolute定位是相对于 static（position默认值）定位以外的第一个父元素进行定位，如果不存在已定位的父元素，则相对于body元素。Fixed定位是相对于浏览器视口来定位的，也就是说，元素的位置不会随着页面滚动而改变，始终会固定在视口的某个位置。Fixed和Absolute都是CSS中定位的属性，它们用于控制元素在页面中的位置，其中Fixed表示固定定位，Absolute表示绝对定位。Absolute定位的常用场景是实现页面中的局部定位，例如可以实现图片的悬浮效果、文字的重叠等。
css中position:fixed实现div居中上下左右居中
09-25
总结来说，使用CSS的position:fixed和相对应的margin调整，可以实现DIV在浏览器窗口中的完全居中。这种方法简单实用，但需要对CSS属性有深入的理解和灵活运用。通过实践和调整，可以发现更多类似的布局技巧，丰富...
详解iOS中position:fixed吸底时的滑动出现抖动的解决方案
08-26
在这种方法中，需要在使用 position:fixed 的元素上加上该属性，以便解决抖动问题。 iOS 中 position:fixed 吸底时的滑动出现抖动的解决方案可以通过解决 native 和 h5 两个原因引起的抖动来实现。开发者可以根据...
跨浏览器的实践:position:fixed 层的固定定位
10-30
`position: fixed` 是 CSS 中的一个定位属性，用于实现这种效果。然而，由于不同浏览器之间的兼容性问题，使用 `position: fixed` 时可能会遇到一些挑战，特别是在老旧的浏览器如 Internet Explorer 6 中。 在给定...
CSS属性详解——position:fixed
热门推荐
Wod_7的博客
06-04 1万+
CSS中的固定定位fixed定位是一种定位方式，使元素相对于浏览器窗口固定位置，换句话说，固定定位的元素会脱离文档流，始终停留在浏览器窗口的某个位置不动，即使用户上下滚动页面也不会改变其位置。
position: fixed定位失效原因及解决方案
shuanghusun的专栏
02-10 449
分析后可知，元素设置了transform属性后会创建一个containing block，这个containing block将重新定义其内部固定定位元素的定位参照点（创建这个containing block元素的padding box），最终固定定位的效果退化为绝对定位。当position属性设置为fixed时，如果该元素的祖先元素设置了transform等属性后，则定位从原来的相对于视口，改为设置了特殊属性的祖先元素。解决方法：尽量不要在可滚动的容器内包含fixed定位的子元素。
解决position: fixed；弹框的中input自定义表单1px border看起来模糊问题
muzidigbig的博客
03-19 1171
出现的问题： 我们想要的效果： 结构： <body> 咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩 <div class="box"> <div class="box_bg"></div> <div class="box_bubble"> <h2...
c语言fixed的用法,Fixed函数
weixin_39739846的博客
05-22 3480
有时候我们会想要将Excel中的数据插入到word当中，如果Excel中有些数值实际是小数位5位，只是显示为2位，这样的话，在用某些工具(比如“邮件合并”)时，导入到word中的对应数值就会显示成没有千分位格式的有5位小数的数值，这样就比较难看,自己一个个的进行更改就会浪费很多时间。这种时候，就可以使用fixed函数。Fixed函数能把数值转换成千分位格式的文本数据，因此这样链接到word中时，显...
css/Jquery position:fixed;点击按钮，底部出现选择框
qq_41283814的博客
12-07 2115
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <title></title>
解决position:fix中的固底定位在跳转后返回的抖动
orichisonic的专栏
03-24 3573
相信不少人做移动端项目的时候都会遇到position:fixed 的坑。 下面提供一个解决方法，不用引入任何其他的js库，纯css解决。   解决问题的关键就是：fixed元素内部必须嵌套一个position:absolute元素，用来装载内容，目的就是为了让内容脱离fixed文档流，屏蔽一些fixed的坑。 我这边参考的是http://www.bubuko.com/inf
CSS中position:fixed的用法
限量版的90后
08-12 1811
我们都知道CSS中定位属性position的值，除了默认的值外，还有absolute,relative和fixed。我平时比较常用absolute和relative，而position:fixed却没多关注。或许是因为当初在CSS中文手册中看到position:fixed旁边有说明“IE5.5及NS6尚不支持此属性”。 有时候在做项目时需要使一个层相对于浏览器边框固定，如果用position
解决position:fixed抖动问题
weixin_50736511的博客
05-14 603
添加代码 html, body {height:100%;overflow:auto;margin: 0;}
CSS布局模型
weixin_30305735的博客
08-11 134
css布局模型 在网页中，元素有三种布局模型：1、流动模型（Flow）2、浮动模型 (Float)3、层模型（Layer） 层模型--绝对定位 如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝...
css position:fixed 元素怎么居中
最新发布
08-05
### 使用 CSS 将 `position: fixed` 元素水平和垂直居中 在 CSS 中，可以通过多种方法实现 `position: fixed` 元素的水平和垂直居中。以下是一些常见且有效的方法： #### 已知大小的元素在屏幕窗口水平和垂直居中 对于已知大小的元素，可以使用 `left: 50%` 和 `top: 50%` 配合负的 `margin-left` 和 `margin-top` 实现居中效果。例如： ```css div { position: fixed; left: 50%; top: 50%; width: 200px; height: 150px; margin-left: -100px; /* width/2 */ margin-top: -75px; /* height/2 */ } ``` 此方法通过将元素的左上角定位到屏幕中心，然后通过负边距将元素向左和向上移动自身宽度和高度的一半，从而实现居中效果[^2]。 #### 未知大小的元素在屏幕窗口水平和垂直居中 对于未知大小的元素，可以使用 `position: fixed` 结合 `margin: auto` 实现居中效果。例如： ```css div { position: fixed; left: 0; right: 0; top: 0; bottom: 0; width: 200px; height: 150px; margin: auto; } ``` 此方法适用于元素的大小不确定的情况，通过设置 `left`、`right`、`top` 和 `bottom` 为 0，并配合 `margin: auto`，可以让元素在其父容器中水平和垂直居中[^1]。 #### 使用 `transform` 实现居中 对于未知大小的元素，还可以使用 `transform` 属性实现居中效果。例如： ```css div { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); } ``` 此方法通过将元素的左上角定位到屏幕中心，然后通过 `transform` 向左和向上移动元素自身宽度和高度的一半，从而实现居中效果[^3]。 ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值