fixed定位

原创 已于 2022-02-17 11:25:11 修改 · 1.4w 阅读 · 10 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css3 #css #html

于 2019-04-10 22:03:46 首次发布

1.MDN中对于fixed定位的解释：不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform 属性非 none 时，容器由视口改为该祖先。
2.所以，MDN 关于 position:fixed 的补充描述不够完善。下述 4 种方式目前都会使得 position:fixed 定位的基准元素改变（本文重点）：

  1. transform 属性值不为 none 的元素
  2. 设置了 transform-style: preserve-3d 的元素
  3. perspective 值不为 none 的元素
  4. 在 will-change 中指定了任意 CSS 属性
莫鸣明
关注
固定定位 fixed
m0_56047670的博客
01-03 913
前端固定定位
static(静态定位)，fixed（固定定位），relative(相对定位)，absolute(绝对定位)
qq_44939011的博客
07-20 1万+
static(静态定位)，fixed（固定定位），relative(相对定位)，absolute(绝对定位) Position的取值： static(静态定位) : 表示块保留在原本应该在的位置，不会重新定位。 fixed（固定定位）：元素就被固定不会随着滚动条的拖动而改变位置。 relative(相对定位) ：相对定位是通过将元素从原来的位置向上、向下、向左或者向右移动来定位的。 absolute(绝对定位)：绝对定位，是相对于最近的且不是static定位的父元素来定位。 1.static(静
[特殊字符]C# 窗体程序从入门到精通：手把手教你打造满分项目
最新发布
weixin_63787825的博客
06-16 886
🔥C# 窗体程序从入门到精通：手把手教你打造满分项目一、引言在软件开发的广阔领域中，C# 凭借其强大的功能和简洁的语法，成为了众多开发者的首选语言。而 C# 窗体程序（Windows Forms Application），作为创建 Windows 桌面应用的经典方式，能快速构建出功能丰富、交互友好的图形界面应用程序。本文将带你从零开始，深入了解 C# 窗体程序的开发流程，搭配大量高清配图和完整代码示例，助你在 优快云 收获满分技术帖！二、开发环境搭建。
固定定位fixed
m0_65696193的博客
07-16 603
当对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置。不管浏览器滚动条如何滚动也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。固定定位是绝对定位的一种特殊形式，它以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。2. 固定定位完全脱标，不占有位置，不随着滚动条滚动。1. 固定定位的元素跟父亲没有任何关系，只认浏览器。
fixed 绝对定位：固定位置
weixin_52772457的博客
10-10 260
fixed:'right’的时候会固定在表格最右侧来显示，当向右边滚动时最右边显示的这一列回到原表格内。
css定位属性position:fixed
wangooo的博客
01-02 6528
Absolute定位是相对于 static（position默认值）定位以外的第一个父元素进行定位，如果不存在已定位的父元素，则相对于body元素。Fixed定位是相对于浏览器视口来定位的，也就是说，元素的位置不会随着页面滚动而改变，始终会固定在视口的某个位置。Fixed和Absolute都是CSS中定位的属性，它们用于控制元素在页面中的位置，其中Fixed表示固定定位，Absolute表示绝对定位。Absolute定位的常用场景是实现页面中的局部定位，例如可以实现图片的悬浮效果、文字的重叠等。
css:fixed定位兼容不同系列不同版本的浏览器包括IE6.0
09-25
在网页设计中，CSS（Cascading Style Sheets）的`fixed`定位是一个强大的特性，它允许元素相对于浏览器窗口保持固定位置，即使页面滚动也不会改变其位置。这种效果常用于创建如“返回顶部”按钮这样的功能，使用户...
html5实现输入框fixed定位在屏幕最底部兼容性
11-19
在桌面端，我们可以轻松地利用CSS的`fixed`定位实现，但在移动设备上，尤其是涉及到键盘弹出和不同浏览器的行为时，问题就变得复杂了。 1. **初步解决**： 初步的布局解决方案通常包括三个部分：头部（header）、...
兼容IE6的fixed定位不晃动
11-05
纯css兼容IE6的fixed定位不上下晃动！
基于Fixed定位的框选功能的实现代码
11-29
在本文中，我们将探讨如何实现基于Fixed定位的框选功能，这一功能常见于批量操作的交互设计中。传统的框选方案通常依赖于绝对定位，但这种方法在处理特定区域的框选时可能会变得复杂，需要频繁调整定位原点。固定...
CSS学习21：fixed（固定定位）
热门推荐
玉安_ZhangDe的博客
04-09 4万+
固定定位是元素固定于浏览器可视区的位置。（认死理型） 主要使用场景： 可以在浏览器页面滚动时元素的位置不会改变。 语法： 选择器 { position: fixed; } 固定定位的特点：（务必记住）： 1.以浏览器的可视窗口为参照点移动元素。 跟父元素没有任何关系 不随滚动条滚动。 2.固定定位不在占有原先的位置。 固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。（认死理型） 完全脱标—..
fixed固定定位
lzl_Avery的博客
03-30 790
div{width: 200px;height: 50px;background: coral; position: fixed;bottom: 50;}     固定定位  jkkkkkkkkkkkkkkk  jkkkkkkkkkkkkkkk  jkkkkkkkkkkkkkkk  jkkkkkkkkkkkkkkk  jkkkkkkkkkkkkkkk
html定位fix,html 定位fixed
weixin_36314117的博客
06-07 539
下面是编程之家 jb51.cc 通过网络收集整理的代码片段。编程之家小编现在分享给大家，也给大家做个参考。123#sub1{width:50px;height:80px;border:1px solid #dcdcdc;}#sub2{position:fixed;top:250px;right:20px;width:50px;height:80px;border:1px solid #dcdcdc...
固定定位（fixed）
娓娓道来
06-30 6920
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> body{ } div{ width: 200px; height: 200px; backg...
css fixed定位
许博文的专栏
01-16 673
需要制作一个弹幕发送框，用到fixed定位输入框。
html中使用fix定位,css之position: fixed;不相对网页定位
weixin_42524824的博客
06-09 2455
描述position: fixed;决定元素(left，top)相对与页面定位，并且height，width百分比也相对页面。绝对定位元素不会因为父元素的overflow: hidden;而隐藏。嵌套的绝对定位都是相对页面定位了，互相定位之间无关联。然而，在某些情况下绝对定位不再相对于页面定位fixed元素会相对于祖先元素中(从下往上)第一个具有transform属性的节点定位。分析相对trans...
fixed内部fixed定位
05-22
### CSS Fixed 定位的实现方式 `position: fixed` 是一种用于将元素相对于视口（viewport）进行定位的技术。这意味着无论页面如何滚动，被定义为 `fixed` 的元素都会保持在其指定的位置[^1]。 #### 实现内部元素的固定效果 如果需要让一个子元素在父级容器内表现为固定的定位，而不仅仅是相对于整个视窗，则可以通过以下方法实现： ##### 方法一：使用 Transform 创建新坐标系 当父元素应用了 `transform` 属性时，它会创建一个新的包含块（containing block）。此时，即使子元素设置了 `position: fixed`，它的行为也会类似于 `position: absolute`，即相对于最近的具有 `transform` 或者其他影响布局特性的祖先元素进行定位[^3]。 以下是具体代码示例： ```html <div class="parent" style="width: 200px; height: 200px; background-color: lightblue; transform: translateZ(0);"> <div class="child" style="position: fixed; bottom: 0; right: 0; width: 50px; height: 50px; background-color: tomato;"></div> </div> ``` 在这个例子中，`.parent` 使用了 `transform: translateZ(0)` 来触发新的坐标系建立，因此 `.child` 将基于此父级范围而非全局视图来进行定位[^4]。 ##### 方法二：模拟 Fixed 效果 另一种常见做法是不用真正的 `fixed` 而改用 `absolute` 加上 JavaScript 动态调整位置来模仿相同的行为。这种方法的好处在于完全可控，并且不受任何特殊条件限制。 下面是一个简单的脚本片段展示这一概念： ```javascript const parent = document.querySelector(&#39;.parent&#39;); const child = document.querySelector(&#39;.child&#39;); function updatePosition() { const rect = parent.getBoundingClientRect(); child.style.top = `${window.scrollY + rect.top}px`; } window.addEventListener(&#39;scroll&#39;, updatePosition); updatePosition(); // 初始化调用 ``` 配合如下 HTML 和 CSS 结构工作正常： ```html <style> .parent { position: relative; overflow-y: auto; max-height: 200px; } .child { position: absolute; top: 0; right: 0; width: 50px; height: 50px; background-color: purple; } </style> <div class="parent"> <!-- 大量内容 --> <div class="child"></div> </div> ``` 这里的关键点在于监听窗口滚动事件并实时更新目标元素距离顶部的距离，从而达到视觉上的“固定”感[^5]。 --- ### 注意事项 需要注意的是，不同浏览器对于某些边缘情况可能存在差异处理逻辑；另外，部分旧版浏览器可能不具备良好支持现代标准的功能特性，所以在开发前最好确认目标用户的设备环境是否满足需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值