html脱离文档流,css固定定位脱离文档流怎么解决？

在我们做WEB前端开发写CSS样式的时候，有时需要使用到固定定位fixed，使用固定定位的话有时会出现固定定位的层脱离了文档流的问题，原因是没有给父级层设置相应的高度造成的，下面本篇给大家介绍一下如何解决这个问题。

具体介绍

我们需要创建一个简单的示例demo.html文件，然后里面放上两个DIV并设置背景色，给子DIV设置高度，代码如图

接下来，我们运行看看，可以看到，当前的情况下，父DIV会因为子DIV的高度而被撑起来，如图所示

然后我们给子DIV设置固定定位position:fixed;,然后浏览器运行查看就会发现，父DIV不会再根据子DIV的高度撑起来，也就是我们常说的脱离文档流了。

.parent{

padding: 50px;

background: #000;

}

.son{

/*设置固定定位*/

position:fixed;

width: 200px;

height: 200px;

background: red;

}

解决方案1：

我们可以强行给父级DIV设置相应的高度，代码及运行效果如图，这个方案的缺点是不够灵活，需要自己计算要设置的高度。.parent{

/*解决方法1：css强制设置父模块宽度高度*/

height: 200px;

padding: 50px;

background: #000;

}

.son{

/*设置固定定位*/

position:fixed;

width: 200px;

height: 200px;

background: red;

}

解决方案2：

我们可以使用JS设置父级DIV的高度等于子DIV，代码及运行效果如图

注意事项

需要注意浏览器兼容性的问题

本文作为示例只是以简单的情况告诉大家解决问题的思路，具体项目中需要更具体的解决方案

更多web前端自学知识，请查阅 HTML中文网！！

html脱离文档流,css固定定位脱离文档流怎么解决？相关推荐

跨浏览器的CSS固定定位{position:fixed}
不知道您是否留意了,浏览本站时,浏览器右下角有一个标着top的黑色直角三角形,可以点击它返回到正在浏览的网页页眉.当滚动网页时,它的位置一直没有任何改变,您感觉它怎么样?这就是通过CSS的定位属性{p ...
CSS——固定定位和Z-index值
固定定位就是相对浏览器窗口定位,绝对定位的一种特殊形式.它以浏览器窗口作为参照物来定义网页元素,当position属性取值为fixed时,即为固定定位. 当对元素设置固定定位后,它将脱离标准文档流的 ...
CSS固定定位[相对浏览器] 相对定位[相对自己] 绝对定位[有relative的元素]
1基础 Fixed:固定定位是相对于浏览器窗口来定位的 Absolution: 绝对定位:当没有父元素或者父元素没有进行定位的时候,就是固定定位,以浏览器为标的物元素会脱离文档流,若该元素没有设置 ...
html固定定位原理,css固定定位
定位的四种模式:static,relative,absolute,fixed 定位的四个位置:left,right,top,bottom 定位属性:position,有四种状态值 1.static:静 ...
定位的坐标原点HTML,css固定定位_CSS绝对定位固定定位详解
摘要腾兴网为您分享:CSS绝对定位固定定位详解,智学网,鱼乐贝贝,优酷,瑞易生活等软件知识,以及安卓微信多开,特效视频,微贷网app,勿忘我3dm,有为学堂,火力牛,手机知网,移动小秘书,快学堂,p ...
css固定定位与绝对定位的区别
绝对定位中当一个DIV块的位置被定义为绝对定位的时候,也就失去了文档流即失去原本的位置,并且以父级为基准(父级元素必须是相对定位如果不是则一直往上找,直到找到body为止)来进行偏移, 固定定位其实和 ...
css固定定位在某个元素的右边
如何将2号盒子固定定位在1号盒子右边,1号盒子在浏览器中居中显示. 第一种: css水平布局满足等式 left + margin-left+padding-left+width+padding-rig ...
CSS固定定位与粘性定位4大企业级案例
前面两篇文章为大家详细讲解了相对定位与绝对定位的应用场景和案例.如果想了解的可以在公众号里面查看去看.本小节我们学习下固定定位与粘性定位的应用场景和案例. 属性值描述 relative 相对定位相 ...
CSS 固定定位 position fixed
简单描述:固定定位是将某个元素固定在浏览器的某个确定的位置,不随滚动条的移动而变化: 注意:固定定位的位置是相对当前浏览器窗口的: 代码示例: 1.我们先在页面中输出一个标准情况下的 div ...
position:fixed 固定定位
一.定位 1.position:fixed 固定定位元素的位置相对于浏览器窗口是固定位置.即使窗口是滚动的它也不会移动: 特性特性:1.元素脱离正常文档流,不占位(也脱离文本流,全脱)2.始终相对 ...

html脱离文档流,css固定定位脱离文档流怎么解决？

html脱离文档流,css固定定位脱离文档流怎么解决？相关推荐

最新文章

热门文章