postion-fixed元素

最新推荐文章于 2024-01-02 16:35:09 发布
最新推荐文章于 2024-01-02 16:35:09 发布
阅读量376 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/liu_qingyi/article/details/104620313
版权
本文探讨了使用position-fixed导致的布局异常问题。当导航栏和图片应用此样式后，原本左右分布的内容缩紧，原因是元素脱离文档流，改变了div默认宽度。解决办法是为div设置100%宽度。

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

脱离文档流后内容像向内缩

为了让导航栏和图片重合，使用了postion-fixed
在这里插入图片描述
但是使用后发现原本左右分开的布局缩到了一起
在这里插入图片描述
这时不是因为布局被打乱了，而是因为脱离文档流后，原div的宽度变化了，只需要给div加上宽度100%即可，不到万不得已尽量不适用宽高属性，不然很容易出BUG
在这里插入图片描述
这里的BUG就是让导航栏其他原本距离右边有距离，这时变成了没有距离

liu_qingyi
关注
position:fixed 固定定位
asdfgv2022的博客
08-03 5万+
元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动：特性特性：1.元素脱离正常文档流，不占位(也脱离文本流，全脱)2.始终相对于浏览器窗口四个角为原点进行固定定位的3.不会随页面的内容滚动而滚动4.能使不能设置宽高的行级元素设置宽高5.提升层级6.如果没有定位偏移属性，对元素本身有影响；应用场景：相对于窗口定位的元素如弹窗、跟随滚动的导航、侧边栏...
ie6 position-fixed效果
09-27
在Web开发中，`position: fixed` 是一个CSS定位属性，用于使元素相对于浏览器窗口保持固定位置，即使页面滚动也不会改变其位置。然而，IE6 不支持 `position: fixed`，这给开发者带来了很大的困扰，因为IE6在当时...
CSS属性详解——position:fixed
热门推荐
Wod_7的博客
06-04 1万+
CSS中的固定定位fixed定位是一种定位方式，使元素相对于浏览器窗口固定位置，换句话说，固定定位的元素会脱离文档流，始终停留在浏览器窗口的某个位置不动，即使用户上下滚动页面也不会改变其位置。
position：fixed固定定位的用法
demin3278的博客
01-03 6575
一、position：fixed；固定定位 　　1.实现某个元素在可视窗口的居中位置显示 　　　　1）给自身设置宽高； 　　　　2）给自身加position：fixed； 　　　　3）用margin向左移动自身宽度的一半，向上移动自身高度的一半； 　　或： 　　　　1）给自身设置宽高； 　　　　2）再设置position：fixed； 　　　　3）再给自身设置left：0...
【剑指 Offer 】40. 最小的k个数
weixin_43958974的博客
10-07 219
题目：40. 最小的k个数 思路 大顶堆：堆顶元素就是堆中所有元素中最大的那个元素。 遍历数组： 如果堆中元素不足K个，那么就是直接添加； 当堆中元素大于等于K个时，就要将堆顶元素与遍历到的当前元素比较： 比栈顶元素大就跳过； 比栈顶元素小，那么栈就弹出栈顶元素，然后将该元素放入栈中； class Solution { public int[] getLeastNumbers(int[] arr, int k) { // 特判 if(k == 0 || k
css中postion的fixed的用法
不懂不懂
03-19 1673
CSS中position属性有4种可选值:static,relative,absolute,fixed,用于定位html元素的位置，并影响元素块生成的方式。这里向大家描述一下position:fixed 的使用，此属性元素的定位方式同absolute类似，但它的包含块是视区本身。 先看代码： 无标题文档
CSS 同级元素position:fixed和margin-top共同使用的问题
09-22
同样地，如果为body元素设置padding-top，也能得到同样的效果，因为这也改变了定位元素（fixed元素）相对于视口的参考原点。 另外，如果body元素设置margin-top属性，那么结果会显示顶部固定元素会空出body的margin...
css中position:fixed实现div居中上下左右居中
09-25
position:fixed表示元素相对于浏览器窗口进行定位，这意味着无论页面如何滚动，元素都将保持在指定的位置。与之相对的是position:absolute，它会将元素定位在最近的已定位祖先元素中，如果没有则相对于初始包含块...
vue-fixed-table:修复表格视图
05-11
通过设置`position: fixed`属性，使表头和需要固定的列脱离文档流，然后根据滚动条的位置调整其位置，以达到视觉上与表格内容对齐的效果。同时，Vue的响应式特性使得组件能实时监控滚动事件，动态更新固定元素的位置...
详解iOS中position:fixed吸底时的滑动出现抖动的解决方案
08-26
在这种方法中，需要在使用 position:fixed 的元素上加上该属性，以便解决抖动问题。 iOS 中 position:fixed 吸底时的滑动出现抖动的解决方案可以通过解决 native 和 h5 两个原因引起的抖动来实现。开发者可以根据...
postion:fixed和margin:0 auto的使用
abc15603014457的博客
07-17 523
很多同学将顶部菜单固定，使用postion:fixed，然后使用margin:0 auto进行居中，发现margin:0 auto并不起作用。 通常，我们要让某元素居中，会这样做： #element{ margin:0 auto; } 　　 如果还想让此元素位置固定呢？一般我们会添加position:fixed，如下： #element{ po...
CSS-关于定位position：fixed
thingir的博客
07-20 427
position:fixed原本是相对于视窗的定位，确因为父级元素中有transform而改变定位位置， 是相对于有transform属性的父级，而不是视窗了 所以在写定位的时候要避免其父级有transform的属性
css定位属性position:fixed
最新发布
wangooo的博客
01-02 6391
Absolute定位是相对于 static（position默认值）定位以外的第一个父元素进行定位，如果不存在已定位的父元素，则相对于body元素。Fixed定位是相对于浏览器视口来定位的，也就是说，元素的位置不会随着页面滚动而改变，始终会固定在视口的某个位置。Fixed和Absolute都是CSS中定位的属性，它们用于控制元素在页面中的位置，其中Fixed表示固定定位，Absolute表示绝对定位。Absolute定位的常用场景是实现页面中的局部定位，例如可以实现图片的悬浮效果、文字的重叠等。
static(静态定位)，fixed（固定定位），relative(相对定位)，absolute(绝对定位)
qq_44939011的博客
07-20 1万+
static(静态定位)，fixed（固定定位），relative(相对定位)，absolute(绝对定位) Position的取值： static(静态定位) : 表示块保留在原本应该在的位置，不会重新定位。 fixed（固定定位）：元素就被固定不会随着滚动条的拖动而改变位置。 relative(相对定位) ：相对定位是通过将元素从原来的位置向上、向下、向左或者向右移动来定位的。 absolute(绝对定位)：绝对定位，是相对于最近的且不是static定位的父元素来定位。 1.static(静
postionfixed固定_关于position：fixed的注意点
weixin_39638468的博客
12-31 486
position: fixed是CSS固定定位，一般用于导航栏吸顶效果。该属性使用的时候要注意一些细节：1.固定定位的盒子必须有宽度也就是必须设置width，如果没有设置宽度，那么该盒子的宽度就是内容撑开的宽度，如果没有内容那么会默认为0，从而无法在页面上看到。由于固定定位一般用于导航栏吸顶效果，所以必须给它设置合适的版心宽度。并且，如果是通过min-width属性和max-width属性设置盒子...
父元素是fixed，子元素是absolute
weixin_34253126的博客
09-25 1237
2019独角兽企业重金招聘Python工程师标准>>> ...
css position两个属性值absolute和fixed的区别
前端小菜鸡
09-21 1527
作为一名css界的小朋友一直没系统的了解过position属性，今天用到了就详细的记录下吧！fixed 固定定位，参照位置是浏览器窗口的左上角，即坐标点为(0px, 0px)absolute 绝对定位，参展位置是离当前元素最近的定位方式为fixed,absolute,relative的祖先原则的左上角。因此，fixed主要用于固定网页的头部尾部和广告区域随屏幕滚动。 absolute主要用于多个di
html中fixed属性,css中fixed是什么意思？
weixin_33736279的博客
06-05 3387
当元素的position属性设置为fixed时，这个元素就被固定了，被固定的元素不会随着滚动条的拖动而改变位置。在视野中，固定定位的元素的位置是不会改变的。fixed固定定位和absolute绝对定位比较类似，它们都能够让元素产生位移，并且脱离文档流。语法：position:fixed;top:像素值;bottom;像素值;left:像素值;right:像素值;“position:fixed;”是...
position:fixed 相对父元素
08-30
position:fixed 相对父元素来说，如果父元素的transform、perspective或filter属性不为none时，fixed元素会相对于父元素进行定位，而不是相对于视窗。 这意味着，如果父元素发生变换，如平移或旋转，那么固定定位的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值