学习笔记—css模拟固定定位 / 解决ie6固定定位失效问题

最新推荐文章于 2023-05-12 14:27:30 发布

小朱爱开发

最新推荐文章于 2023-05-12 14:27:30 发布

阅读量241

点赞数 1

分类专栏：学习笔记文章标签： html css js

本文链接：https://blog.csdn.net/weixin_44312227/article/details/108269367

版权

学习笔记专栏收录该内容

19 篇文章 0 订阅

订阅专栏

ie6固定定位失效

ie6中是不支持元素固定定位的，所以不要慌，我们可以用css代码模拟固定定位。

在贴代码之前，先要说明几个相关的问题：
1、在默认情况下，当页面内容超出视窗高度时，会出现滚动条，而这个滚动条是在html标签之外的初始包含快上的
在这里插入图片描述 ！！！初始包含块是一个浏览器窗口大小的矩形并非浏览器窗口
2、绝对定位
绝对定位是相对于最近的开了定位的祖先元素进行定位的，如果没有这样的祖先元素，则相对于初始包含块进行定位

所以我们可以利用绝对定位的特点进行固定定位模拟，当一个元素开启绝对定位但没有开启了定位的祖先元素时，它相对于初始包含块进行定位，所以我们只需要把初始包含快上的滚动条禁止，该元素就没有办法跟随html或者body上的滚动条进行滚动

3、怎样禁用初始包含块的滚动条

html{
height:100%;
overflow:hidden;
}
body{
height:100%;
overflow:scroll;
}

测试代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		html{
			height:100%;
			overflow:hidden;
		}
		body{
			height:100%;
			overflow:scroll;
		}
		#box1{
			width: 100px;
			height:100px;
			background-color:red;
			position: absolute;
		}
		#box2{
			width:200px;
			height:1000px;
			background-color:gold;
		}
		#box3{
			width:300px;
			height:1000px;
			background-color:green;
		}
		</style>
	</head>
	<body>
		<div id="box1"></div>
		<div id="box2"></div>
		<div id="box3"></div>
	</body>
</html>

小朱爱开发

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
学习笔记—css模拟固定定位 / 解决ie6固定定位失效问题

ie6固定定位失效ie6中是不支持元素固定定位的，所以不要慌，我们可以用css代码模拟固定定位。在贴代码之前，先要说明几个相关的问题：1、在默认情况下，当页面内容超出视窗高度时，会出现滚动条，而这个滚动条是在html标签之外的初始包含快上的！！！初始包含块是一个浏览器窗口大小的矩形并非浏览器窗口2、绝对定位绝对定位是相对于最近的开了定位的祖先元素进行定位的，如果没有这样的祖先元素，则相对于初始包含块进行定位所以我们可以利用绝对定位的特点进行固定定位模拟，当一个元素开启绝对定位但没有开启了定位的
复制链接

扫一扫

专栏目录