使position:fixed不与其他div重叠 ，fixed所在div高度不变和可变两种情况

最新推荐文章于 2022-10-07 16:59:00 发布
最新推荐文章于 2022-10-07 16:59:00 发布
阅读量3.8k 收藏 2
点赞数 1
分类专栏： Vue移动端 JavaScript HTML+CSS 文章标签： position fixed
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41836598/article/details/102609299
版权

由于fixed会使元素脱离文档流，让该div不与其他div重叠有两种方法

高度固定的情况

方法一：设置下方区域的padding-top

padding-top: XXpx

方法二：设置fixed所在div的top和left

position: fixed;
top: 0;
left:0;

以及下方区域的margin-top

高度可变的情况需要获取fixed的div的动态高度：

在这里插入图片描述
方法一：设置设置可滚动区域的marginTop值
获取高度可变区域的高度并设置下方div的marginTop

// 获取高度可变区域的高度
var height = document.getElementsByClassName('top_container'
最低0.47元/天 解锁文章
Cici_cclu
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
IE6不兼容position:fixed的多种解决方案分析与总结
guaguapi_ndsc的专栏
09-10 839
目录       引言       解决方案基本思路            1、视窗与网页的区别            2、position:fixed固定定位的含义            3、position:fixed固定定位与position:absolute绝对定位的区别            4、用position:absolute绝对定位模拟position:fixed固定
使设置了position:fixed的元素不与下面的元素重叠
行云出岫
11-21 6996
方法一： header设置了position:fixed定位后，下一个div(main)会上移，可以给header部分设置高，然后main设置一个margin-top,可以实现两个div分开，另外设置position:fixed的部分，一定要设置top:0； left:0; 不然会引起margin-top失效。 方法二： 在设置了fixed的div下再设置一个空的div，设置成你要占据的高度即可。...
HTML用定位实现重叠,HTML/CSS固定定位造成重叠的div
weixin_39845113的博客
06-02 412
您所在的问题是因为position: fixed;，因为该对象已从工作流程中移出，而其他对象无法将其推出。我能够得到一个很好的，完全响应的布局工作。 (让我知道它是如何)固定定位元素从正常流程中删除。 文档和其他元素表现得像固定定位元素 不存在。固定定位元素可以重叠其他元素。好什么，我这里做的是使用CSS media queries改变布局。下面是HTML，现在媒体查询，@media only s...
css解决使用固定定位导致下方元素上移到固定定位元素的位置
黑帽子技术的博客
10-07 2515
问题描述 固定定位相对于视口定位，如果上方有一个div元素，开启固定定位以后，这个div就会脱离文档流（“漂浮走了”），那么原来的这个div所占据的位置，就会空出来，就会导致下方的div元素蹿升上来。就会导致布局的紊乱。解决方式...
css
besttoby01的博客
07-13 337
笔记7-13 1. css 1. 背景相关的颜色 body{ background-color: red; background-image: url("../pic/photo.jpg"); background-repeat:no-repeat; /*background-position: inherit;*
html fixed后重叠了,HTML中三种定位relative,absolute,fixed使用后出现的一些问题
weixin_34552525的博客
06-03 740
1 . 相对定位relative:顾名思义,相对定位是相对于自己的位置来进行偏移,如下图:以盒子中心为基准,为每条边的正方向,例:向右移动20px　:　　代码为left:20px;或者right:-20px;向下移动20px : 代码为top:20px;或者bottom:-20px;2 . 绝对定位:absolute以其第一个定位的祖辈级盒子为标准,定位祖辈级的中心方向为正,如下图:3...
div设为浮动后，下面的文档向上移动，解决重叠
不积硅步，无以至千里，不积小流，无以成江海。
12-28 4969
问题： 上方div设置浮动后，下面的div向上移动，重叠了，怎么解决重叠问题？解决方法 在下方div中添加样式，清除浮动，添加clear:both; 效果
当fixed元素相互嵌套时chrome下父元素会影响子元素的层叠关系
weixin_30583563的博客
11-03 229
问题：fixed元素被另一个fixed元素包含的时候在chrome下fixed子元素的定位会受到父元素的影响。 解释：层叠关系是受层叠上下文影响的。文档中的层叠上下文由满足以下任意一个条件的元素形成： 根元素 (HTML), 绝对（absolute）定位或相对（relative）定位且z-index值不为"auto", 元素的opacity属性值小于1. (参考the specifi...
fixed脱离文档流 不占位置
qq_52822043的博客
05-06 2359
position：absolute/fixed 元素开启绝对定位和固定定位之后才会脱离文档流。 相对定位无法脱离文档流。 解决方案： 给设置了fixed的元素外面包一层div，再给这个div设置高度即可，这样，这个div就撑起了元素所站的位置，从而不影响其他元素的显示。 .container { width: 200px; height: 100%; .el-menu { position: fixed; height: 100%; border:
解决固定定位无法覆盖的层叠问题
a1071626267的博客
06-11 1423
解决固定定位无法覆盖的层叠问题
position:fixed 绝对定后后,父元素没有高度如何解决
sunluyi的博客
03-15 1709
一种: 直接对没有高度的元素家 padding-top， 有点旁门左道的感觉。实现快。二种: 外层nav必须加高度, 用里边class来绝对定位。解决父元素没有高度的问题。更多CSS小技巧查看：孙鲁意博客网站...
position:fixed定位时 “高度坍塌” 问题的解决
weixin_30315723的博客
11-05 910
问题：对于固定定位的元素，固定住高度，后面紧跟的模块会当做前面的固定元素不存在似的，这给布局带来了困扰 解决方法： 1.给第二个模块div设置margin-top的值，margin-top的值设为大于等于固定定位模块的高度 2.这个方法是百度百科手机页面用的，先为固定定位元素设一个父元素，不设高度，不设宽度，什么都不设，他的第一个子元素是我们需要做固定定位的元素，这个...
浅析CSS——元素重叠及position定位…
jiqiujia的专栏
01-06 1822
转载地址： http://www.cnblogs.com/mind/archive/2012/04/01/2198995.html 多次在项目中遇到html页面元素的非期待重叠错误，多数还是position定位情况下z-index的问题。其实每次解决类似问题思路大致都是一样的，说到底还是对z-index的理解比较模糊，可以解决问题却不大了解其原因，导致重复出错......于是决定把重叠问题弄清下
css-移动端解决底部fixed定位，挡住一部分内容
热门推荐
qq_32838979的博客
01-03 1万+
移动端底部内容fixed定位挡住部分内容 在开发移动端页面时，经常出现的一种布局是在浏览器底部固定一个盒子，设置固定定位fixed，但是会出现这个固定定位的盒子压住上文的内容的情况，详细看下图： 蓝色的底部固定栏挡住了部分产品的内容。 这里我的底部固定栏的高度设置为8%，代码如下： <!-- html部分--> <div class="main"> <img src="1.jpeg" alt="" class="image"> </div> <
页面布局顶部fixed定位如何不影响下部元素
qq_41606029的博客
11-30 3199
今天进行页面开发的时候遇到一个小问题，当顶部使用fixed定位后，会脱离文档流，从而使底部元素跑到页面顶部去， 解决方法： 在顶部需要fixed定位的元素外面加一层div，并设置高度，问题解决。 ...
移动端fixed上中下布局主体部分高度问题
weixin_33971130的博客
01-10 766
最近刚学移动端相关的内容，刚好遇到了上中下布局的问题 三部分都是用的fixed布局，头部和底部设置的固定高度，但是要求主体部分高度是撑满中间区域 如果设置高度100%的话默认是获取的手机屏幕的可视高度，并不是中间部分的区域的高度 解决方法 将主体部分设置left,right都是0, 则默认撑满宽度, 将top,bottom分别设置成头部和底部的高度，这样就将中间部分完全撑开了 <...
position定位总结+元素选择器+重绘+回流/重排
m0_52669454的博客
09-01 1109
position定位总结+元素选择器+重绘+回流/重排
关于CSS中Position属性
bailin1974的博客
09-19 96
static和relative的用法比较清晰，在此就不做讨论了，值得注意的是static定位，即默认没有定位的元素忽略 top, bottom, left, right 或者 z-index 声明；而relative定位的元素虽然没有脱离文档流，同样忽略 top, bottom, left, right声明，但是却z-index属性却可以起作用。 昨天主要纠结在absolute和fix...
position: fixed之后怎么让div居中
最新发布
09-08
### 回答1： 要让一个 position: fixed 的 div 元素在页面中居中，可以使用如下的 CSS 样式： ```css div { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); } ``` 这样设置后，div 元素将会以页面中心为基准点进行定位。其中，top 和 left 分别设置为 50%，表示相对于父元素的中心点进行定位；transform 属性中的 translate(-50%, -50%) 表示将元素自身的中心点向左上方移动 50%，这样就可以实现完全居中的效果。 ### 回答2： 在使用`position: fixed`之后，要让`div`居中，可以通过以下两种方式实现。 方法一：使用`left`和`top`属性结合`transform`属性。 ```css .div-class { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); } ``` 以上代码将`div`的左上角定位在屏幕的中心位置。通过`left: 50%`和`top: 50%`将`div`的起始位置定位在屏幕的中心点，然后使用`transform: translate(-50%, -50%)`将`div`自身向左上方移动自身宽度和高度的一半，实现居中效果。 方法二：使用flexbox布局。 ```css .container { display: flex; justify-content: center; align-items: center; } .div-class { position: fixed; } ``` 以上代码将包含`div`的容器设置为`display: flex`，并在容器中使用`justify-content: center`和`align-items: center`让`div`居中。这种方法更加灵活，可以适应不同尺寸和样式的`div`。 以上两种方法都可以让`div`在使用`position: fixed`后实现居中效果，具体选择哪种方法取决于项目需求和布局结构。 ### 回答3： 在使用position: fixed之后，想要让div居中，可以通过以下步骤实现： 1. 首先，确保div的父元素具有相对定位（position: relative）属性。这是因为，固定定位（position: fixed）元素的定位是相对于最近的具有定位属性的父元素。 2. 给父元素设置以下CSS属性： display: flex; // 将父元素设置为弹性盒子 justify-content: center; // 将子元素在父元素的水平方向上居中 align-items: center; // 将子元素在父元素的垂直方向上居中 3. 确保div本身也具有一些样式，例如设置宽度（width）和高度（height），以便它在屏幕上可见。 通过上述步骤，可以将固定定位的div元素居中显示在页面上。同时，您还可以根据需要进行相应的微调，例如在父元素上设置padding或margin属性，以获取更满意的布局效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值