在我们做 web 前端开发写 CSS 样式的时候, 有时需要使用到固定定位 fixed, 使用固定定位的话有时会出现固定定位的层脱离了文档流的问题, 原因是没有给父级层设置相应的高度造成的, 下面本篇给大家介绍一下如何解决这个问题.
具体介绍
我们需要创建一个简单的示例 demo.html 文件, 然后里面放上两个 DIV 并设置背景色, 给子 DIV 设置高度, 代码如图
接下来, 我们运行看看, 可以看到, 当前的情况下, 父 DIV 会因为子 DIV 的高度而被撑起来, 如图所示
然后我们给子 DIV 设置固定定位 position:fixed;, 然后浏览器运行查看就会发现, 父 DIV 不会再根据子 DIV 的高度撑起来, 也就是我们常说的脱离文档流了.
- <style>
- .parent{
- padding: 50px;
- background: #000;
- }
- .son{
- /* 设置固定定位 */
- position:fixed;
- width: 200px;
- height: 200px;
- background: red;
- }
- </style>
解决方案 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 前端自学 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/css3/18193.html