父级fixed_子元素使用position：fixed,导致他的宽度不能和父元素保持一致的解决方案...

最新推荐文章于 2024-05-14 12:33:13 发布
最新推荐文章于 2024-05-14 12:33:13 发布
阅读量1.3k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_34410975/article/details/114021392
版权

父级fixed

最近在编码过程中，遇到过这样一个问题，代码如下，我们有一个父级，他有一定的宽度，在他的里面有两个子级，其中一个是绝对定位的，且要求他们的宽度都和父级保持一致，然后问题就出现了，我们会发现，有了定位的son他的宽度远远的超出了我们父级的宽度，那么问题是怎么引起的呢？

经过各种百度之后发现，原来给子元素加了position:fixed这个属性之后，他就默认相对于window去定位了，就相当与你将这个元素相对于window加上了position:absolute的属性，所以给他加百分比长度的话就是相对于window的百分比。那么解决方案有哪些呢？我们来一一尝试。

1、left：0；right:0;因为fixed也相当于是定位的一种，所以我们当然也可以用left和right来进行定位了，然后将left的值扩大，同时将width的百分比减少，从而使得son和demo的宽度达到一致，从而起到一种视觉上的欺骗效果。(PS：请谨慎使用)

颜书意
关注
子类absolute相对父类不同position的定位
萌新_zackXiong_勇闯前端~
12-12 1478
在学习前端的时候遇到过一个问题: 当子类position为absolute时,父类的position 不同时子类会怎么定位. 直接上图好理解~ 灰色框框为祖父元素 position:relative 红色框框为父元素 position: absolute/relative/inherit/…. 蓝色框框为子元素 position :absolute       各种情况:...
父级fixed_position:fixed相对父级元素定位而不是浏览器
weixin_39631755的博客
12-22 1941
position:fixed默认是相对浏览器定位的原理：fixed定位相对父级容器定位，不添加:top,bottom,left,right样式,通过margin定位HTML布局：JS Binfixed定位相对父级容器定位，不添加:top,bottom,left,right样式,通过margin定位abcdefghijklmnopCSS样式：.father {width:300px;height:3...
子元素设置position:fixed，z-index大于父元素依然被父元素盖住
qssn的博客
04-13 3582
在项目中遇到一个奇怪的问题，当父元素样式overflow有滚动条、borde-radius存在、position不为static时，和z-index不为auto时，子元素的position就算是fixed，且z-index大于父元素，也会被隐藏掉。源码和效果图如下： 直接体验请点击：链接 源码：源码 <style> #father { width: 200px; ...
关于fixed元素的【子父div】宽度问题
Bloxed_shangyc的博客
05-23 8875
<div class="wrap"> <div class="header"></div> <div class="main"></div> </div> 1、header设置为position:fixed后，如何让其宽度等于父元素wrap的宽度？ 2、transform是把fixed降级成absolu...
设置了position后为什么margin:auto没用
L2395183536的博客
12-28 1947
设置了position后为什么margin:auto没用 原因：因为该元素已经脱离了文档流。另外，不管它的祖先元素有没有定位，都是以文档流中原来所在的位置上偏移参照物。所以margin这个时候不会骑作用滴，需要用left， right, bottom,top来进行精确定位了 ...
postionfixed固定_position:fixed定位问题的解决
weixin_39915210的博客
01-13 727
本篇文章介绍了一个在开发中遇到的诡异的问题，排查问题过程颇为艰辛，不过最终结果还是值得的，因为巩固了一些基础知识和好的调试方法，它们是：fixed定位的特点样式优先级的判定如何使用浏览器的DOM还原一闪即逝的错误效果1. 问题说明在猎萝卜-猎头端，测试提出这样一个bug(禅道编号12828)：在猎萝卜的 订单 - 我的职位 - 已接单 入口，点击右侧职位列表的任意职位，在弹出职位预览之前(图2)，...
CSS中的定位和解决父元素高度塌陷
QyangR1123的博客
02-27 5341
在CSS中，Position 属性经常会用到，主要是绝对定位和相对定位，简单的使用都没有问题，尤其嵌套起来，就会有些混乱，今记录总结一下。 1、相对定位( position: relative;) 如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。 relative：生成相对定位的元素，相对于其正常(原来)位置进行定位。 2、绝对定位（position: absolute;） 绝对定位使元素的位置与文档流无关，因此不占..
css设置元素继承父元素宽度,我如何做一个固定的定位div继承父的宽度？
weixin_36282765的博客
12-22 592
Is there a way a fixed positioned div can inherit the width of a parent?I know fixed width is relative to the window's so this code doesn't work:#wrapper{position: relative;width:500px;height: 20px;ba...
绝对定位元素被遮挡的解决方法
09-25
为了解决绝对定位元素被遮挡的问题，需要对绝对定位元素的父元素设置z-index值，即使是1，只要这个值高于所有可能遮挡该元素的其他相对定位元素的z-index值，就可以保证绝对定位元素在层级上处于上层。这样做的目的...
CSS定位(position)
weixin_68531139的博客
07-27 368
定位模式是否脱标占有位置是否可以使用边偏移移动位置基准静态static不脱标，正常模式不可以正常模式相对定位relative脱标，占有位置可以相对自身位置移动绝对定位absolute完全脱标，不占有位置可以相对于定位父级移动位置固定定位fixed完全脱标，不占有位置可以相对于浏览器移动位置。......
【HTML-进阶-如何实现父级块级元素宽度自适应子元素宽度】
banglianqian3400的博客
10-13 1586
背景 块级元素宽度默认值为100%，而不是auto;因此其宽度不会根据子元素内容动态适应。 如何实现父级元素宽度动态适应其子元素。 方法一 display:inline; 给块级元素设置inline-block值。 { display: inline-block; } 方法二 绝对定位元素 给块级元素设置position：absolute/fixed; { position:a...
当fixed元素相互嵌套时chrome下父元素会影响子元素的层叠关系
weixin_30583563的博客
11-03 241
问题：fixed元素被另一个fixed元素包含的时候在chrome下fixed子元素的定位会受到父元素的影响。 解释：层叠关系是受层叠上下文影响的。文档中的层叠上下文由满足以下任意一个条件的元素形成： 根元素 (HTML), 绝对（absolute）定位或相对（relative）定位且z-index值不为"auto", 元素的opacity属性值小于1. (参考the specifi...
详谈css定位position中的absolute和fixed以及relative的区别
QUX轻博客
12-10 594
我们前端经常开发中会遇到定位的问题，因为当前的图层被遮挡，或者需要突破盒子div的束缚，再者悬浮到页面的左右；对于一些初学者来说就不知道怎么用了，明明我想定位到这个地...
position:fixed无法固定到父盒子上面的解决方案
qq_71214810的博客
05-14 1444
粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。简单来讲的话一个元素在滚动到某个位置之前为相对定位，然后当它达到指定的偏移位置时，它会“粘”在那里（就像固定定位一样通常是视口的顶部或底部），直到滚动出视口。需要注意的是，为了使粘性定位生效，元素必须有一个toprightbottom或left属性的非auto值。sticky元素根据正常文档流进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor）和。
前端笔试所获(css盒子)
qq_45149720的博客
10-16 174
CSS 盒子模型(Box Model) 1.Margin(外边距) - 清除边框外的区域，外边距是透明的。 2.Border(边框) - 围绕在内边距和内容外的边框。 3.Padding(内边距) - 清除内容周围的区域，内边距是透明的。 4.Content(内容) - 盒子的内容，显示文本和图像。 position static 定位 HTML 元素的默认值，即没有定位，遵循正常的文档流对象。 静态定位的元素不会受到 top, bottom, left, right影响。 fixed 定位 元素的位置相对
子元素使用position：fixed,导致他的宽度不能和父元素保持一致的解决方案
m0_49471668的博客
12-27 3118
3、absolute改造；因为fixed也相当于是定位的一种，所以我们当然也可以用left和right来进行定位了，然后将left的值扩大，同时将width的百分比减少，从而使得son和demo的宽度达到一致，从而起到一种视觉上的欺骗效果。最近在编码过程中，遇到过这样一个问题，代码如下，我们有一个父级，他有一定的宽度，在他的里面有两个子级，其中一个是绝对定位的，且要求他们的宽度都和父级保持一致，然后问题就出现了，我们会发现，有了定位的son他的宽度远远的超出了我们父级的宽度，那么问题是怎么引起的呢？
子元素使用position:fixed后宽度不能和父元素保持一致问题的解决方案
qq_44827891的博客
06-17 6976
position:fixed定位的元素,宽度超出，怎么解决？ 最近做项目时，用fixed固定在窗口底部时，发现宽度超出。 因为整体布局为左右结构，父元素采用flex布局。左侧固定宽度，右侧填充。 右侧头部需要固定显示，下面内容可以滚动，width设置为100%时，发现超出父元素。 初步解决方案： .header { height: 50px; line-height: 50px; border-bottom: 1px solid #cecece; box-shadow: 0 2px
问题：子元素添加 position: fixed； 其宽度不能和父元素保持一致
m0_68196864的博客
12-25 951
当给子元素添加 position:fixed;时，其相对的父元素变为了浏览器窗口。再去给子元素添加 width:100%;时，并不能使其宽度与父元素相同。给子元素添加代码： width: calc(100% - 340px);用到 css3 新特性 calc() 可以在 css 代码中进行运算。其中 340px 代表需要减掉的多余宽度。
CSS position: fixed 相对于父元素定位
热门推荐
weixin_48003149的博客
12-10 1万+
使用fixed进行布局的元素，在一般情况下会相对于屏幕视窗来进行定位。但是如果父元素的transform,perspective或filter属性不为none时，position为fixed的元素就会相对于父元素来进行定位。​​​​​​​ 如果父级元素的层级比其兄弟节点低，就算fixed的层级比父级元素及其兄弟元素高，它也会被父级元素的兄弟元素遮挡住。
子元素position为fixed时，宽度如何保持与父元素一致。
最新发布
09-30
当子元素`position`设置为`fixed`时，它相对于浏览器窗口定位，而不是其直接的父元素。因此，如果想要让固定定位的子元素宽度与其父元素保持一致，你需要采取一些策略： 1. **计算宽度**：如果你知道父元素的宽度并且需要动态应用到子元素上，你可以通过JavaScript获取父元素的宽度，并将其作为`width`属性应用于子元素。 ```javascript let parentWidth = document.getElementById('parent').offsetWidth; document.getElementById('childFixed').style.width = parentWidth + 'px'; ``` 2. **使用CSS`:calc()`**：在CSS中，你可以利用`:calc()`函数来计算宽度，如`width: calc(100% - 20px);`，这里假设需要减去20px的边距或者其他已知空间。 3. **使用Flexbox或Grid布局**：如果你的父元素使用了Flexbox或Grid布局，可以直接设置子元素的宽度为`auto`，让它们自适应占据剩余的空间。 ```css .parent { display: flex; } .childFixed { position: fixed; width: auto; } ``` 4. **设置视口单位（vw/vh）**：可以将子元素的宽度设置为其父元素宽度的百分比，例如`width: 100vw;`，这样子元素会与视口宽度相等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值