CSS-关于定位position：fixed

最新推荐文章于 2023-12-27 14:14:31 发布
最新推荐文章于 2023-12-27 14:14:31 发布
阅读量383 收藏
点赞数
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/thingir/article/details/107456869
版权

position:fixed原本是相对于视窗的定位，确因为父级元素中有transform而改变定位位置，

是相对于有transform属性的父级，而不是视窗了

所以在写定位的时候要避免其父级有transform的属性

thingir
关注
专栏目录
CSS-position: fixed固定定位
主营前端方向，技术栈是vue
11-15 548
position: fixed固定定位(绝对定位一种，根据浏览器窗口点位不随滚动条滚动)
css定位属性position:fixed
wangooo的博客
01-02 4663
Absolute定位是相对于 static（position默认值）定位以外的第一个父元素进行定位，如果不存在已定位的父元素，则相对于body元素。Fixed定位是相对于浏览器视口来定位的，也就是说，元素的位置不会随着页面滚动而改变，始终会固定在视口的某个位置。Fixed和Absolute都是CSS中定位的属性，它们用于控制元素在页面中的位置，其中Fixed表示固定定位，Absolute表示绝对定位。Absolute定位的常用场景是实现页面中的局部定位，例如可以实现图片的悬浮效果、文字的重叠等。
CSS 实现导航栏和左侧栏固定 内容区滚动
找个地方记录踩坑
11-01 1万+
实现左侧栏占浏览器除导航栏外的整高 将html、body高度设置为整高，将div.main（包含row，row包含sidebar、content）高度设置为浏览器高度减掉navbar高度，再将main下的row、sidebar高度设置为100%，即可实现。 <!DOCTYPE html> <html lang="zh-cn">
CSS属性详解——position:fixed
Wod_7的博客
06-04 1万+
CSS中的固定定位fixed定位是一种定位方式，使元素相对于浏览器窗口固定位置，换句话说，固定定位的元素会脱离文档流，始终停留在浏览器窗口的某个位置不动，即使用户上下滚动页面也不会改变其位置。
css fixed定位
weixin_44415561的博客
06-14 524
html <div class="text"> 捡猫的博客 </div> css body{ height:2000px; } .text{ width:300px; height:100x; background:skyblue; position:fixed; right:0; bottom:100px; font-size:30px; color:white; text-align:center; line-height:100px } fixed定位的核心css代码为
CSS定位—固定定位 fixed
qq_43247538的博客
07-11 1123
固定定位是元素固定于浏览器可视区的位置。主要使用场景：在浏览器页面滚动时元素的位置不会改变。 语法：选择器｛position:fixed;｝ 固定定位的特点: 1.以浏览器的可视窗口为参照点移动元素。 ·跟父元素没有任何关系 ·不随滚动条滚动。 2.固定定位是脱标的。 ......
css中position:fixed实现div居中上下左右居中
09-25
在这段CSS代码中，首先设置了.dialog类的position属性为fixed，确保该DIV相对于视口定位。接着，通过设置top: 50%和left: 50%属性，将DIV元素的左上角定位到视口的中心位置。然后，通过设置margin负值来调整DIV元素...
CSS 同级元素position:fixed和margin-top共同使用的问题
09-22
在网页设计中，CSS的定位属性position: fixed经常被用来创建固定在页面上的元素，如顶部导航栏。而margin属性则用来给元素添加外边距。当这两个属性共同作用于同级元素时，可能会遇到一些布局上的问题。本文探讨了在...
使用CSS样式position:fixed水平滚动的方法
09-04
在网页设计中，CSS的`position:fixed`属性通常用于创建元素的固定定位，使得元素在页面滚动时始终保持在屏幕的某个位置。然而，当页面存在水平滚动条时，`position:fixed`元素仅能实现垂直方向的固定，而无法实现...
跨浏览器的实践:position:fixed 层的固定定位
10-30
`position: fixed` 是 CSS 中的一个定位属性，用于实现这种效果。然而，由于不同浏览器之间的兼容性问题，使用 `position: fixed` 时可能会遇到一些挑战，特别是在老旧的浏览器如 Internet Explorer 6 中。 在给定...
CSS 固定定位 position fixed
热门推荐
cvper's world !
01-28 6万+
简单描述：固定定位是将某个元素固定在浏览器的某个确定的位置，不随滚动条的移动而变化；                 注意：固定定位的位置是  相对当前浏览器窗口  的； 代码示例： 1.我们先在页面中输出一个标准情况下的 div 元素，不添加定位；  代码： *{margin:0;
CSS position定位（fixed、sticky）
大圣归来圣骑士清欢的博客
12-27 993
CSS position定位（fixed、sticky）
position：fixed固定定位的用法
demin3278的博客
01-03 6502
一、position：fixed；固定定位 　　1.实现某个元素在可视窗口的居中位置显示 　　　　1）给自身设置宽高； 　　　　2）给自身加position：fixed； 　　　　3）用margin向左移动自身宽度的一半，向上移动自身高度的一半； 　　或： 　　　　1）给自身设置宽高； 　　　　2）再设置position：fixed； 　　　　3）再给自身设置left：0...
css:position fixed使用
看陌生的风景的博客
07-23 888
position:fixed的元素将相对于屏幕视口（viewport）的位置来指定其位置。并且元素的位置在屏幕滚动时不会改变。 （上层元素有的使用了transform: translate(0, 0);导致position: fixed功能失效） pointer-events: none; 元素永远不会成为鼠标事件的target。但是，当其后代元素的pointer-events属性指定其...
CSS:position:fixed使用
WhoWrongsWhere的专栏
01-04 1273
position属性规定元素的定位类型，即建立元素布局所用的定位机制。任何元素都可以定位，不过绝对定位或固定定位元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。 position属性值除了默认的static外，还有relative、absolute、fixed，本文重点讨论fixed属性值。 一、position:fixed
CSS学习21：fixed（固定定位）
玉安_ZhangDe的博客
04-09 3万+
固定定位是元素固定于浏览器可视区的位置。（认死理型） 主要使用场景： 可以在浏览器页面滚动时元素的位置不会改变。 语法： 选择器 { position: fixed; } 固定定位的特点：（务必记住）： 1.以浏览器的可视窗口为参照点移动元素。 跟父元素没有任何关系 不随滚动条滚动。 2.固定定位不在占有原先的位置。 固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。（认死理型） 完全脱标—..
position:fixed 固定定位
asdfgv2022的博客
08-03 5万+
元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动：特性特性：1.元素脱离正常文档流，不占位(也脱离文本流，全脱)2.始终相对于浏览器窗口四个角为原点进行固定定位的3.不会随页面的内容滚动而滚动4.能使不能设置宽高的行级元素设置宽高5.提升层级6.如果没有定位偏移属性，对元素本身有影响；应用场景：相对于窗口定位的元素如弹窗、跟随滚动的导航、侧边栏...
postion:fixed和margin:0 auto的使用
abc15603014457的博客
07-17 486
很多同学将顶部菜单固定，使用postion:fixed，然后使用margin:0 auto进行居中，发现margin:0 auto并不起作用。 通常，我们要让某元素居中，会这样做： #element{ margin:0 auto; } 　　 如果还想让此元素位置固定呢？一般我们会添加position:fixed，如下： #element{ po...
postion-fixed元素
liu_qingyi的博客
03-02 345
脱离文档流后内容像向内缩 为了让导航栏和图片重合，使用了postion-fixed 但是使用后发现原本左右分开的布局缩到了一起 这时不是因为布局被打乱了，而是因为脱离文档流后，原div的宽度变化了，只需要给div加上宽度100%即可，不到万不得已尽量不适用宽高属性，不然很容易出BUG 这里的BUG就是让导航栏其他原本距离右边有距离，这时变成了没有距离 ...
overflow: hidden;display: flex;display: inline-flex;display: inline-block;position: absolute;position: fixed;
最新发布
05-31
- position: fixed：元素相对于视口的位置而不是相对于文档的位置进行定位，即无论滚动条如何滚动，元素的位置都不会改变。 范例： ``` 假设我有一个div元素，它的id为myDiv，并且我希望它始终在浏览器窗口的右下角...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值