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

由于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]
console.log(height.offsetHeight)
var tar = document.getElementsByClassName('mid_container')[0]
tar.style.marginTop = height.offsetHeight + 'px'

设置
fixed所在div的top和left

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

方法二：设置可滚动区域的paddingTop值
获取高度可变区域的高度并设置下方div的paddingTop

// 获取高度可变区域的高度
var height = document.getElementsByClassName('top_container')[0]
console.log(height.offsetHeight)
var tar = document.getElementsByClassName('mid_container')[0]
tar.style.paddingTop = height.offsetHeight + 'px'

注意：vue的画代码写在mounted（）中，不能卸载befoMount（）中

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

html怎么让两个div重叠,如何将一个div与另一个div重叠
接受的解决办法效果很好,但国际海事组织对其为何有效缺乏解释.下面的示例可以归结为基本的内容,并将重要的CSS与不相关的样式CSS区分开来.另外,我还详细解释了CSS定位是如何工作的. TLDR:如果您 ...
（div，p）等标签之间“分割线”的两种实现方式
在项目.网页中经常会遇到在两个区域之间增加一条"线"来到达分割的效果,我在这里提供两种思路方法,以解决不同的实际问题. 1 直接使用htmld 的<hr>标签,会显示一 ...
html 对象元素如何获取div 里的data值原生和jq对象两种获取
这是对象,需要获取到div里的data-id的值转成jq对象就行了 console.log($(t).data("id")) 2.打印一下当前元素: 获取当前事件元素: t.cu ...
html中两个div垂直居中对齐,在div中垂直居中的两个元素
桃花长相依如何对元素进行垂直.水平或两者的居中这里有两种在div中对div进行中心化的方法.一种使用CSS的方法柔性箱另一种方式是使用CSS工作台和定位财产.在这两种情况下,居中的div的高度都可以 ...
Topcoder口胡记 SRM 562 Div 1 ~ SRM 599 Div 1
据说做TC题有助于提高知识水平? :) 传送门:https://284914869.github.io/AEoj/index.html 转载请注明链接:http://www.cnblogs.com/B ...
html怎么使两个div模块并列居中,css怎样让两个div重叠,怎么让整个div居中
css怎样让两个div重叠CSS如何使两个div重叠,css使两个div重叠的方法:首先,使用[position:absolute]属性为div设置绝对定位:然后使用z-index属性确定哪个div在 ...
html怎么让两个div重叠,两个DIV或多个DIV顺序重叠加
DIV堆叠 CSS让DIV层叠.叠加,CSS让两个DIV或多个DIV按程序堆叠叠加篇让DIV重叠并按想要举措重叠须要CSS来实现,即CSS绝对定位发展实现. 重叠格局必要主要CSS名目抒发 1.z- ...
html中div的覆盖,CSS中如何使div覆盖另一个div的实例
将一个p覆盖在另一个p上有两种手段:一是设置margin为负值,二是设置绝对定位. 可以根个人情况设置z-index的值 1->position 为absolute的情况 #p1{positio ...
html和css实现透明div上的div不透明，也可说父div透明，子div不透明
css:实现透明div上的div不透明,也可说父div透明,子div不透明,但这里并不是严格的父子关系,只是看起来像是父子关系. 一.方法一: (1)代码片段: ...<style>div ...

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

高度固定的情况

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

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

最新文章

热门文章

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

高度固定的情况

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

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

最新文章

热门文章

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

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